让网页中的password input跟手机一样友好

平常网页中的password输入框，都是直接显示一排子弹如****** 或者●●●●●● 。这导致用户如果输入错误，而没及时发现，等提交验证后提示密码错误，再重新输入一遍。许多智能手机，包括iPhone,通过展示与延迟密码的领域，继而转化*或● 。这样一个好处就是：视觉反馈输入密码有无正确，及时更改。

1. 放一真正的label和password input
2. 通过脚本创建一个覆盖在password上面的普通input，且绑定它的focus,change事件
3. 当用户提交表单时，发送的密码字体是原来的password input值，而伪password input已被转换为一排子弹了

脚本如下：

window.onload = function() {
  if(document.getElementsByTagName) {
    var inputs = document.getElementsByTagName('input');
    var password_inputs = Array();
    for(var i in inputs) {
      if(inputs[i].type == 'password') {
        password_inputs.push(inputs[i]);
      }
    }
    for(var i in password_inputs) {
      var input = inputs[i];

      var masking_element = document.createElement('input');//创建一个普通的input来掩盖password input
      with(masking_element) {
        style.position = 'absolute';
        id             = input.name + '_mask';
        type           = 'text';
        size           = input.size;
        className      = input.className;
      }
      masking_element.onfocus = function(){this.nextSibling ».focus()};
      input.parentNode.insertBefore(masking_element, input);

      input.onchange = function() {

        if(this.timer){
          clearTimeout(this.timer);
        }

        var mask_character = "\u2022";
        var last_character = this.value.charAt(this »
        .value.length-1);

        var masked_text    = this.previousSibling.value;
        var password_text  = this.value;

        if(masked_text.length < password_text.length) {
          this.previousSibling.value = password_text.substr(0,
            password_text.length-1).replace(/./g,
            mask_character)+last_character;
        } else {
          this.previousSibling.value = password_text »
          .replace(/./g,mask_character);
        }
        this.timer = setTimeout("with(document.getElement »
        ById('"+masking_element.id+"')){value=value »
        .replace(/./g,'"+mask_character+"')}",2000);

      }
      input.onkeyup = input.onchange;
      input.onchange();

    }
  }
}

查看Demo