Question

是否有任何跨浏览器方式来获取<input type="password">字段中的密码屏蔽字符，或者禁止设置它？

例如，Chrome＆amp; Firefox＆amp; OSX上的Safari使用•，而iOS 7上的Safari使用●。也许其他浏览器可能会使用老式的* - 我不知道。

Answer 1

这似乎也是先前被问过的。查看change password char in HTML，其中说明无法完成。

快速搜索显示它可以通过伪造来完成，并且不能在常规密码字段上完成，因为它是由浏览器定义的。请参阅http://www.htmlforums.com/showpost.php?p=655392&postcount=4

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<script type="text/javascript">
   var k=0;
   var df;
window.onload=function() {
   df=document.forms[0];
df[1].onkeyup=function() {
df[0].value+=df[1].value.charAt(k);
   k++;
for(c=0;c<df[1].value.length;c++) {
   df[1].value=df[1].value.replace(df[1].value.charAt(c),'#');
   }
  }
 }
</script>

</head>
<body>

<noscript>
<div>
Without javascript enabled you will be unable to login
</div>
</noscript>

<form action="http://www.google.com/">
<div>
<input type="hidden" name="password">
<input type="text">
<input type="submit" value="submit password">
</div>
</form>

</body>
</html>

Answer 2

这是样式和处理的完整实现。我希望你喜欢它：）

function showHidePassword(passSelector, textSelector) {
    if ($(passSelector).hasClass("hidden")) {
        $(passSelector).val($(textSelector).val());
        $(textSelector).addClass("hidden");
        $(passSelector).toggleClass("hidden");
    }
    else {
        $(textSelector).val($(passSelector).val());
        $(passSelector).addClass("hidden");
        $(textSelector).toggleClass("hidden");
    }
}

.hidden{
display:none !important;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<div class='card'>
<div class='card-body'>
<div class='input-group'>
<div class='input-group-prepend'>
<span class='input-group-text'>
<i class='fa fa-key'></i>
</span>
</div>
<input type='password' id='password' class='form-control'/>
<input type='text' class='form-control hidden' id='passwordContent' disabled/>
<div class='input-group-append'><span class='input-group-text' onclick='showHidePassword("#password","#passwordContent")'><i class='fa fa-eye'></i></span></div>
</div>
</div>
</div>

获取或设置<input type =“password”/>屏蔽字符

2 个答案: