JavaScript implementation input box of password box appears prompt
- 2020-11-30 08:10:19
- OfStack
Sometimes we need to have some prompts on the login form, such as "please enter username" and "please enter password", etc. As for the user name, it is easy to say, but "please enter password" in the password box is a bit troublesome, because what is entered in the password box will not be shown in clear code. There is a compatibility issue if the type property is dynamically controlled. If input is already on the page, the type property is read-only in browsers below IE8 and IE8. So something else had to be done. Here's the code:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="https://www.ofstack.com/" />
<title> The home of the script </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!=" password ")
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=" password ";
}
}
</script>
</head>
<body>
<input type="text" value=" password " id="tx"/>
<input type="password" id="pwd" />
</body>
</html>
The above code to achieve our requirements, can appear clear code prompt, when the password is entered in password mode.
The implementation principle is very simple, in the default state as type="text" text box display, when clicking on the text box, type="password" password box display, the original display text box hidden, that is to say, made a replacement.