search

Home >Web Front-end >JS Tutorial >How to use JavaScript to enter prompts in the text box (password box)_javascript skills

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

WBOY
WBOYOriginal
2016-05-16 15:23:221652browse

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>

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.

Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：Understanding Knockout and how to use Knockout to bind context_javascript skillsNext article：Understanding Knockout and how to use Knockout to bind context_javascript skills

Related articles

See more