使用文本输入作为密码 html JavaScript 但不是 type=password答案

【问题标题】：Use a text input as a password html JavaScript but not type=password使用文本输入作为密码 html JavaScript 但不是 type=password
【发布时间】：2016-09-07 17:32:26
【问题描述】：

我有一个困境，我需要一个标准文本输入框来充当没有 type=password 属性的密码输入。

原因是应用程序出于特定原因不希望密码管理器被它触发。

基本上我在想

<script>
var mypw ="";
</script>

<input type="text" onkeydown="updatethis(this)"     onpaste="updatethis(this)">

在这之后我迷路了，但不知何故我希望密码存储在 mypw 中，输入只显示一个安全字符。

同样需要非常独特，但我需要避免密码管理器在这种情况下触发。

【问题讨论】：

我需要它在所有浏览器中工作。 Edge和ie不支持。

标签： html text input passwords

【解决方案1】：

我最终将颜色和背景更改为白色，然后在其上方映射了一个分隔线并在 jquery 中更新。

                        <input class="noselect" type="text" id="password"
                            placeholder="Click2Mail Password" name="password" value="" onkeyUp="updatePW();"
                            required><div id="pwchar" onclick="$('#password').focus();" style="font-weight: 300;font-size:14px;position:absolute;top:0px;left:0;margin-top:12px;margin-left:38px;z-index:999999999999999999;"></div>

这里是jquery

function updatePW()
{

    $("#pwchar").html($('#password').val().replace(/./g,"*"));
}

最后一个 css 以确保您无法选择框中的文本

#password{ -webkit-text-security: disc;background-color:#fff;color:#fff;
 }
.noselect {
    -webkit-touch-callout: none; /* iOS Safari */
  -webkit-user-select: none;   /* Chrome/Safari/Opera */
  -khtml-user-select: none;    /* Konqueror */
  -moz-user-select: none;      /* Firefox */
  -ms-user-select: none;       /* Internet Explorer/Edge */
  user-select: none;           /* Non-prefixed version, currently
                                  not supported by any browser */

}

这不是完美的解决方案，但它确实有效。

【讨论】：

【解决方案2】：

你的意思是这样的？

input{
    -webkit-text-security: disc;
}

First name:<br>
<input type="text" name="firstname">

【讨论】：

我需要它在所有浏览器中工作。 edge和ie都不支持。