JS implementation of input box prompts text clicks disappear effect _javascript Skills

Source: Internet
Author: User

This article describes the JS implementation of the input box prompts text clicks disappear effect. Share to everyone for your reference, specific as follows:

In the Web landing box in the input box will often see prompts you to enter what content of the word color is relatively light, this is "text box clicks when the text disappears, lose focus when the text appears" This effect, this effect with a JS can be completed, this effect is to do the site of the necessary JS code; I will write JS write and write fast , you will need code collection to make a backup, and it will be much easier to use.

The following is the implementation of the effect of the JS code:

<script language= "JavaScript" type= "text/javascript" >
  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 = "Please enter your ID";
  })
</script>

As long as the code saved into a JS file can be a good quote on the Web page OK, easy to complete this to not program people look very difficult effect.

HTML code:

 <! DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01//en" "HTTP://WWW.W3.ORG/TR/HTML4/STRICT.DTD" >  
 

More readers interested in JavaScript-related content can view this site: "JavaScript in the JSON Operation tips Summary", "JavaScript switching effects and techniques summary", "JavaScript Search Algorithm Skills summary", " JavaScript animation effects and tips Summary, "JavaScript Error and debugging skills Summary", "JavaScript data structure and algorithm skills summary", "JavaScript traversal algorithm and Skills summary" and "JavaScript Mathematical operation Usage Summary"

I hope this article will help you with JavaScript programming.

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.