Use jquery to obtain the focus and defocus of the text box.

Source: Internet
Author: User

Use jquery to obtain the focus and defocus of the text box.

I still like to use jquery to implement it. No matter how many input boxes on the page need to be focused or defocused, they are all public. My common methods are as follows:

Traverse the input box on the page to obtain the val value in the input box. When the input box is focused, compare it with the stored oldValue value. If the value is the same, the value is changed to null, in case of defocus, the original stored value is assigned to val. The Code is as follows:

$(function(){    $("input[class*=input]").each(function(){         var oldValue=$(this).val();                $(this).focus(function(){             if($(this).val()==oldValue){            $(this).val('');            }           })       .blur(function(){        if($(this).val()==""){            $(this).val(oldValue)            }        })          });})


Js Implementation Method 1: directly add
<Input type = "text" onfocus = "if (this. value = 'focus bar') this. value = '';" onblur = "if (this. value = '') this. value = 'focus Ba '; "value =" Focus ba "name =" name ">


Js Implementation Method 2:

Html code:

<Input type = "text" value = "Focus bar" id = "myinput"/>

The js Code is as follows:

Function addListener (element, e, fn) {if (element. addEventListener) {element. addEventListener (e, fn, false);} else {element. attachEvent ("on" + e, fn) ;}} var myinput = document. getElementById ("myinput"); addListener (myinput, "click", function () {myinput. value = "";}) addListener (myinput, "blur", function () {myinput. value = "Focus ";})


Of course, when there is a focus on the page and the focus is deprecated, I recommend using jquery.

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.