javascript - 如何为密码字段实现 Javascript onfocus() 和 onblur()？

Question

根据我的标题如何实现密码字段的onfocus和onblur？默认值为密码(可读)，当我们点击密码字段时，它将返回密码格式。

举个例子，我不想看到“●●●●●●●●”，而是“密码”

<input type="password" name="password" value="password" onfocus="this.value=(this.value=='password') ? '' : this.value;" onblur="this.value=(this.value=='') ? 'password' : this.value;" />

更新

我找到的 Google 结果 Change Input Type Dynamically但是代码太长了。也许 jquery 可以让它更短。

Answer 1

如果您尝试使用 1 个字段，您将在 Internet Explorer 中遇到麻烦，因为 IE 不会让您更改字段的类型。

您将需要使用 2 个字段，当文本输入获得焦点时，将其隐藏，显示密码输入并获得焦点。

你需要这样的东西(使用 jQuery):

<input type="text" id="fakeemail" value="email@domain.com"/>
<input type="password" id="realemail" value="" name="email" style="display:none;"/>

$('#fakeemail').focus(function(){
  $(this).hide();
  $('#realemail').show().focus();
});
$('#realemail').blur(function(){
  if(this.value == ''){
    $(this).hide();
    $('#fakeemail').show();
  }
});