Home  >  Article  >  Web Front-end  >  JS realizes the disappearance and display effect of the password box according to the acquisition and loss of focus_javascript skills

JS realizes the disappearance and display effect of the password box according to the acquisition and loss of focus_javascript skills

WBOY
WBOYOriginal
2016-05-16 15:29:431468browse

The example in this article describes the JS implementation of the disappearance and display effect of the password box based on the acquisition and loss of focus. Share it with everyone for your reference, the details are as follows:

Things:

1. First, temporarily replace the password box with txt and assign the default value 1eb762b98a07c17e3850087a7e763232
2. When the text box gets the focus, clear the default value and change the type to password.
3. When the text box loses focus, change the type to txt and set the default value to "Please enter your password."

JS code:

window.onload=function(){
  var input=document.getElementById('input');
  input.onfocus=function(){
    if(this.value=='请输入密码'){
      this.value='';
      this.type='password';
    };
  };
  input.onblur=function(){
    if(!this.value){
      this.type = 'text';
      this.value = '请输入密码';
    };
  };
};

HTML code :

Copy code The code is as follows:

49d8b95a6d67c78cb22702b8fc373a98

PS: Here we recommend a very easy-to-use JavaScript compression, formatting and encryption tool, which is very powerful (for those who want to encrypt their code, you may want to try it Try the js encryption function here):

JavaScript compression/formatting/encryption tool: http://tools.jb51.net/code/jscompress

In addition, the encryption in the above js tool uses the eval function encryption form. For this, this site also provides the following decryption tool for eval function encryption, which is very powerful and practical!

JS eval method online encryption and decryption tool: http://tools.jb51.net/password/evalencode

I hope this article will be helpful to everyone in JavaScript programming.

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