This article describes the effect of JS implementing the disappearance effect of prompting text to click on the input box. Share it for your reference, as follows:
In the input box in the web login box, you often see the words prompting you to enter something lighter in color. This is the effect of "the text disappears when the text box is clicked, and the text appears when the focus is lost." This effect can be completed with JS. This effect is a must-have JS code for people who make websites. If you know how to write JS, you can write quickly. If you don't know how to write, you need to collect codes for backup, which is much more convenient when you use it.
Here is the JS code used for this effect implementation:
<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>Just save this code into a JS file, and make references on the web page and easily complete this effect that seems difficult for people who don’t know how to program.
Html code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN""http://www.w3.org/TR/html4/strict.dtd"><html> <head> <meta http-equiv="Content-Type" content="text/html; charsetGB2312" /> <title> Text disappears when the text box is clicked, and text appears when the focus is lost</title> </head> <body> <input type="text" value="Please enter your ID" id="myinput" /> </body></html><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>For more information about JavaScript related content, please check out the topics of this site: "Summary of JSON operation skills in JavaScript", "Summary of JavaScript switching effects and techniques", "Summary of JavaScript search algorithm skills", "Summary of JavaScript animation special effects and techniques", "Summary of JavaScript errors and debugging skills", "Summary of JavaScript data structures and algorithm skills", "Summary of JavaScript traversal algorithms and techniques" and "Summary of JavaScript mathematical operations usage"
I hope this article will be helpful to everyone's JavaScript programming.