Ans : जब किसी form element पर mouse को click करते ही वह active हो जाता है , जिसे हम focus event कहते हैं ।
comparison by isEqualNode
.focus
Ans : जब किसी form focus element को छोड़कर किसी दूसरे element या window पर mouse click करते हैं तो focus element blur हो जाता है।
comparison by isEqualNode
.blur
Ans : जब किसी form textbox या textarea में कुछ भी type करते हैं तो वह input event कहलाता है।
.input
HTML Code
Javascript
Modern Javascript
Angular Js
Node Js
Express Js
Mongo DB
<html>
<!--head section-->
<head>
<title>Official Website Teach Coders</title>
<meta name="description" content="Teach Coders" />
<meta name="keywords" content="Teach Coders" />
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="container">
<form>
<label for="fname">First Name</label>
<input type="text" class="teach" name="firstname" value="input your first name">
<div class="pastecode"></div>
<label for="lname">Last Name</label>
<input type="text" class="teach" value="input your last name" name="lastname">
<label for="country">Country</label>
<select class="teach" name="country">
<option value="australia">Australia</option>
<option value="canada">Canada</option>
<option value="usa">USA</option>
</select>
<label for="subject">Subject</label>
<textarea class="teach" name="subject" placeholder="Write something.." style="height:200px"></textarea>
<input type="submit" value="Submit">
</form>
</div>
</body>
</html>
-----------------------------------------------
EXAMPLE 1 : focuse |using querySelector| (only one element)
-----------------------------------------------
<script>
var my_element = document.querySelector(".teach");
my_element.addEventListener("focus", todo);
function todo(){
this.style.background="red";
}
</script>
-----------------------------------------------
EXAMPLE 2 : focus & blur |using querySelector| (only one element)
-----------------------------------------------
<script>
//focus
var my_element = document.querySelector(".teach");
my_element.addEventListener("focus", todo);
function todo(){
this.style.background="red";
}
//blur
my_element.addEventListener("blur", removetod);
function removetod(){
this.style.background="white";
}
</script>
-----------------------------------------------
EXAMPLE 3 : focus & blur |using querySelectorAll| (all element)
-----------------------------------------------
<script>
var my_element = document.querySelectorAll(".teach");
my_element.forEach(myfunc);
function myfunc(e){
//foucs
e.addEventListener("focus", todo);
function todo(){
this.style.background="red";
e.value =" ";
}
//blur
e.addEventListener("blur", removetod);
function removetod(){
this.style.background="white";
e.value= "hello Teach Coders";
}
}
</script>
-----------------------------------------------
EXAMPLE 4 : input |using querySelector| (only one element)
-----------------------------------------------
<script>
var my_element = document.querySelector(".teach");
my_element.addEventListener("input", todo_input)
function todo_input(){
var paste = this.value;
document.querySelector(".pastecode").innerHTML=paste;
}
</script>
Css Code
<style>
body {font-family: Arial, Helvetica, sans-serif;}
* {box-sizing: border-box;}
input[type=text], select, textarea {
width: 100%;
padding: 12px;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
margin-top: 6px;
margin-bottom: 16px;
resize: vertical;
}
input[type=submit] {
background-color: #04AA6D;
color: white;
padding: 12px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
}
input[type=submit]:hover {
background-color: #45a049;
}
.container {
border-radius: 5px;
background-color: #f2f2f2;
padding: 20px;
width:500px;
margin:auto;
}
.pastecode{
color: blue;
padding-bottom: 25px;
font-size: 16px;
font-weight: bold;
}
</style>