Text Box to get focus and loss of focus judgment code _ form special effect

Today, I would like to introduce two methods for getting the focus in the text box and losing the focus. For more information, see Text Box loss focus event, get focus event

OnBlur: this event is generated when the input focus is lost.
OnFocus: this file is generated when the input gets the focus.
Onchange: this event is generated when the text value changes.
Onselect: this file is generated when the text is highlighted
Onpropertychange this event occurs when the property changes
The keyup onchange and so on are the most sensitive.

Let's look at the javascript directly written on the input.

The Code is as follows:

Jquery Implementation Method

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

Focus (): used to obtain the focus, which is the same as onfocus in javascript.
For example:

The Code is as follows:

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

Blur (): used when the focus is lost, just like onblur.
For example:

The Code is as follows:

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

Instance

The Code is as follows:

Jquery 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 God horse? ');
});
})

Okay, pretty good.

The following is a simple example:

The Code is as follows:

Untitled document

Script
Function tt (){
Var I = document. form1.text1. value;

If (I. length> = 6)
Document. getElementById ("s1"). innerHTML = "the user name cannot exceed 6 characters ";
Else
Document. getElementById ("s1"). innerHTML = "";
}
Function (){
Var j = document. form1.text2. value;
If (j. length> = 6)
Document. getElementById ("s2"). innerHTML = "the password cannot exceed 6 characters"
Else
Document. getElementById ("s2"). innerHTML = "";
}


Script

First: html5

Html5 adds several new attributes to the form text box, such as email, tel, number, time, required, autofocus, and placeholder. These attributes greatly change the form effect.
Placeholder is one of them, which can get the focus and lose the focus in the text box at the same time. Make sure that the value of input is null. The content of placeholder is what we see on the page.
The Code is as follows:

The Code is as follows:

Type 2: jQuery

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

The Code is as follows:

The Code is as follows: