& Lt; sharp jQuery & gt; improved usage of the sample. The html text input box displays the switching function with the prompt message indicating that the input focus is lost,

Source: Internet
Author: User

<Sharp jQuery> improved usage of the sample. The html text input box displays the switching function with the prompt information that loses the input focus,

In section 3.2.10 of the second edition of the book, the sample code used for introducing the val () method is common and the scenario mode of this sample is used in actual work, so I tried to optimize it. I wrote an html text input box to display the switching function with the prompt information that lost the input focus.
Original book code:

<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN "" http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> <Html> 

Change the JavaScript code to the following:

<Script type = "text/javascript"> // <! [CDATA [$ (function () {var toggleInputTipOnFocusBlur = function (event) {// text box to get the mouse focus if (event. type = "focus" & $ (this ). val () = this. defaultValue) {$ (this ). val (""); // if the input box content meets the prompts, clear the text box content} else if (event. type = "blur" & $ (this ). val () = "") {$ (this ). val (this. defaultValue); // If the input content meets the null condition, set the content }};$ ("# address "). focus (toggleInputTipOnFocusBlur ). blur (toggleInputTipOnFocusBlur); $ ("# password "). focus (toggleInputTipOnFocusBlur ). blur (toggleInputTipOnFocusBlur) ;}); //]> </script>

Using the function chain and fixed function name toggleInputTipOnFocusBlur, you can almost complete the settings without having to copy the code.

Key points: the event parameter obtained by the event processing function. The event name can be obtained through its type attribute.

 

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.