Judgment code for text box to gain focus and lose focus_Form special effects

The text box loses focus event and gains focus event

onBlur: This event is generated when the input focus is lost.
onFocus: The file is generated when the input focus is gained.
Onchange: When the text value changes, this event is generated
Onselect: When the text is highlighted, the file is generated
onpropertychange When the property changes, this event is generated
Regardless of pasting keyup onchange, etc., it is the most sensitive

First let’s look at the javascript written directly on the input

Copy code The code is as follows:

jquery implementation method

For element focus events, we can use jQuery’s focus functions focus(), blur().

focus(): Used when focus is obtained, the same as onfocus in JavaScript.
For example:

Copy code The code is as follows:

$("p").focus(); or $("p").focus(fn)

blur(): used when focus is lost, the same as onblur.
For example:

Copy code The code is as follows:

$("p").blur(); or $("p").blur(fn)

Example

Copy code The code is as follows:

Search? Here the label covers the text box, which can better control the style

jquery code

Copy code The code is as follows:

$(function() {
$(' #searchKey').focus(function() {
$('#lbSearch').text('');
});
$('#searchKey').blur(function() {
var str = $(this).val();
str = $.trim(str);
if(str == '')
$('#lbSearch'). text('Search for Shenma?');
});
})

Okay, pretty good

Here is a simple example:

Copy code The code is as follows:

< ;script>
function tt(){
var i=document.form1.text1.value;

if(i.length>=6)
document.getElementById("s1" ).innerHTML="Username cannot be greater than 6 characters";
else
document.getElementById("s1").innerHTML="";
}
function a(){
var j=document.form1.text2.value;
if(j.length>=6)
document.getElementById("s2").innerHTML="Password cannot be greater than 6 characters"
else
document.getElementById("s2").innerHTML="";
}

Username:


Password:

html>

First type: html5

html5 adds several new attributes to the form text box, such as: email, tel, number, time, required, autofocus, placeholder, etc. These attributes bring great changes to the form effect.
Placeholder is one of them, it can complete the text box gaining focus and losing focus at the same time. It must be ensured that the value of the input is empty, and the content of the placeholder is what we see on the page.
The code is as follows:

Copy code The code is as follows:

Second: jQuery

Principle: Make the val value of the form equal to its title value .
The code is as follows:

Copy code The code is as follows:

Copy code The code is as follows :

The text box gets focus and loses focus and calls JavaScript

Copy code The code is as follows:

> ;