JS实现密码框根据焦点的获取与失去控制文字的消失与显示效果

  本文实例讲述了JS实现密码框根据焦点的获取与失去控制文字的消失与显示效果。分享给大家供大家参考,具体如下:

  思路:

  1、首先用把密码框用txt暂时替代,并赋上默认值 <input type="text" value="请输入密码" />

  2、当文本框获取焦点后,把默认值清空,把type改为password。

  3、当文本框失去焦点后,把type改为txt,把默认值设为“请输入密码”。

  JS代码:

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代码

  

复制代码 代码如下:

  <input type="text" value="请输入密码" id="input" />

  希望本文所述对大家JavaScript程序设计有所帮助。