How to use JavaScript to enter prompts in the text box (password box)

How to use JavaScript to enter prompts in the text box (password box)_javascript skills

WBOY

Release： 2016-05-16 15:23:22

Original

1667 people have browsed it

Sometimes we need to have some prompt language in the login form, such as "Please enter user name" and "Please enter password". As for the user name, it is easy to say, but in the password box, language like "Please enter password" appears. It's a bit troublesome, because the content entered in the password box will not be displayed in clear code. If the type attribute is dynamically controlled, there will be compatibility issues. If the input already exists in the page, the type attribute is read-only in IE8 and browsers below IE8. So I have to think of other ways. The code is as follows:

<!DOCTYPE html> 
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.softwhy.com/" />
<title>脚本之家</title>
<style type="text/css">
#tx{
width:100px;
}
#pwd{
display:none;
width:100px;
}
</style>
<script type="text/javascript"> 
window.onload=function(){
var tx=document.getElementById("tx");
var pwd=document.getElementById("pwd"); 
tx.onfocus=function(){ 
if(this.value!="密码") 
return; 
this.style.display="none"; 
pwd.style.display="block"; 
pwd.value=""; 
pwd.focus(); 
} 
pwd.onblur=function(){ 
if(this.value!=""){
return; 
} 
this.style.display="none"; 
tx.style.display=""; 
tx.value="密码"; 
} 
}
</script> 
</head> 
<body> 
<input type="text" value="密码" id="tx"/> 
<input type="password" id="pwd" /> 
</body> 
</html>

Copy after login

The above code realizes our requirements. A clear prompt can appear. When entering the password, it is entered in the password mode.

The implementation principle is very simple. In the default state, the text box is displayed with type="text". When the text box is clicked, the password box with type="password" is displayed. The originally displayed text box is hidden, that is to say Just made a replacement.

The above content is the knowledge shared by the editor on how to implement prompts in the password box using JavaScript. I hope you will like it.