Home > Article > Web Front-end > JavaScript implements prompts in the input box (password box)_javascript skills

JavaScript implements prompts in the input box (password box)_javascript skills

WBOYOriginal: 2016-05-16 15:20:392290browse

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.jb51.net/" />
<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 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.

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：JavaScript form validation example to verify whether the form item is empty_javascript skillsNext article：JavaScript form validation example to verify whether the form item is empty_javascript skills

See more

JavaScript implements prompts in the input box (password box)_javascript skills

Related articles