Use the jquery data method to store data for an element in the page (get focus, clear default value)

Source: Internet
Author: User

You can avoid storing data in the DOM using the data method, and some front-end development ER likes to use HTML attributes to store data;

Using the "alt" attribute to store data as a parameter name is actually not semantic for HTML.

We can use the jquery data method to store data for an element in the page:

HTML section:

1 <formID= "Testform">2     <inputtype= "text"class= "Clear"value= "Always cleared" />3     <inputtype= "text"class= "Clear Once"value= "Cleared only once" />4     <inputtype= "text"value= "Normal text" />5 </form>

JS section:

1$(function() {2      //Remove the input field with the clear class3      //(Note: "Clear once" is a two class clear and once)4$ (' #testform input.clear '). each (function(){5          //storing data by using data method6$( This). Data ("TXT", $.trim ($ ( This). Val ()));//This is the this element of the following focus event7}). Focus (function(){8          //determines whether the value in the field is the same as the default value when the focus is obtained, and empties if the same9          if($.trim ($ ( This). val ()) = = = $ ( This). Data ("TXT") ) {Ten$( This). Val (""); One      } A}). blur (function(){ -          //add blur time to the domain with class clear to restore the default value -          //but if class is once then ignore the          if($.trim ($ ( This). val ()) = = = "" &&!$ ( This). Hasclass ("Once") ) { -          //Restore saved Data -$( This). Val ($ ( This). Data ("TXT") ); -        } +     }); -});

Attention:

1.js section, the 4th line of code, we use each to traverse all selector elements (sometimes not only one element requires this effect)

2.js section, the 6th line of code, the removal of the space before and after the Val value ($.trim method) into data (' tet '). Here this represents the this in all the elements traversed by each

Use the jquery data method to store data for an element in the page (get focus, clear default value)

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: info-contact@alibabacloud.com 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.