Implement Password box default text effect instance code:
We all know that many text boxes have default prompt text by default, such as "Please enter name" Language, when you click on the text box, will clear the prompt, more humane. But it might be a little tricky to do this in the Password box, because the password box is not shown in clear text, so here's an example of a code instance that solves the problem.
The code is as follows:
<!DOCTYPE HTML><HTML><Head><MetaCharSet= "Utf-8"><Metaname= "Author"content= "http://www.softwhy.com/" /><title>Ant Tribe</title><Scripttype= "Text/javascript">window.onload=function(){ varTX=document.getElementById ("TX"); varpwd=document.getElementById ("pwd"); Tx.onfocus=function() { if( This. Value!="Please enter your password") return; This. Style.display="None"; Pwd.style.display=""; Pwd.value=""; Pwd.focus (); } Pwd.onblur=function() { if( This. Value!="") return; This. Style.display="None"; Tx.style.display=""; Tx.value="Please enter your password"; } }</Script></Head><Body><inputtype= "text"value= "Please enter password"ID= "TX"style= "width:100px;" /><inputtype= "Password"ID= "pwd"style= "display:none;width:100px;" /></Body></HTML>
The above code to achieve our needs, the default state has a clear text prompt, after the click can enter the password, the following describes the process of dimly realized.
I. Principle of implementation:
In fact, the principle is very simple, in the default display of a text box, the Password box is set to invisible state, when the text box is clicked, the text box is set to invisible, the real password box shows the position of the replacement text box, so that the effect is achieved.
Two. Related reading:
The 1.onfocus event can be found in the Onfocus event section of JavaScript .
The 2.focus () function can be found in the Text.focus () method section of JavaScript .
The 3.onblur event can be found in the Onblur event section of JavaScript .
4.value properties can be found in the Text.value Properties section of JavaScript .
The original address is: http://www.softwhy.com/forum.php?mod=viewthread&tid=9525
For more information, refer to: http://www.softwhy.com/javascript/
Implement Password box default text effect instance code
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
