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;" />

更新

谷歌搜索结果我发现Change Input Type Dynamically但代码太长了。也许jquery可以缩短它。

Answer 1

如果您尝试使用1个字段，您将在Internet Explorer中遇到问题，因为IE 不允许您更改字段的type。

你需要使用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();
  }
});

Answer 2

更改type attr。动态：

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

（我建议您使用脚本代替内联）。

Answer 3

您可以尝试使用一些jQuery并使用CSS定位移动字段标签。检查一下这个人的实现：http://graphicpush.com/more-accessible-input-pre-filled-text-with-jquery

他链接到的网站对焦点上的输入字段也有很好的淡入淡出效果（但是他的实现比他链接的那个更好）。

如何为密码字段实现Javascript onfocus（）和onblur（）？

3 个答案: