如何允许浏览器将文本输入保存为密码

HTML How to allow browser to save a Text input as password

本文关键字：保存 密码 输入 文本 何允许 浏览器      更新时间：2023-09-26

在我的静态登录网页，

我想把我的<input type="password">框的字体改为自定义的@font-face，但不能，所以我把它改为<input type="text">，并继续完成我的网页。

我的@font-face，自定义字体，是一组风格化的乱码符号，我想使用而不是默认的*符号，在输入文本时默认生成。

现在我想让用户保存他/她的密码在他们的浏览器，但浏览器不给保存密码选项，当我提交我的表单作为两个输入类型的文本。有什么办法可以帮我吗?

编辑:我的HTML: 

<form id="loginform" action="#" method="get">
            <label for="uname"> Username</label>
            <input type="text" class="user" name="uname" id="uname" value="" placeholder="UserName" />
            <label for="pass">Password</label>
            <input type="text" class="paswd" name="pass" id="pass" value=""  placeholder="Password"/>
            <input type="submit" name="name" value="Submit" />
      </form>

我的CSS: 

@font-face {
    font-family: 'webfontregular';
    src: url('myfont.woff2') format('woff2'),
         url('myfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
.paswd{
  font-family: 'webfontregular';
}
编辑2:我找到了一个临时解决方案，我已经在firefox中测试了

使用以下java脚本

  var FormSubmit = function (){
    document.getElementById('pass').setAttribute("type", "password");
    document.getElementById('loginform').submit();
  }

添加一个按钮到我的HTML

<input type="button" value="Click this" onclick="FormSubmit()" />

连接速度慢会改变我的密码字体，所以有没有永久性的解决方案?

这里有一个解决方法。添加一个样式为的密码输入字段display:none &type="password"并在上输入事件您的文本类型密码字段更新密码字段的值如下所示。当提交表单时，浏览器将提示保存密码。

    $(function(){
        $('#pass').on('input', function(){
            $('input[type="password"]').val(this.value);
        });
    });
    <form id="loginform" action="#" method="get">
                <label for="uname"> Username</label>
                <input type="text" class="user" name="uname" id="uname" value="" placeholder="UserName" />
                <label for="pass">Password</label>
                <input type="text" class="paswd" name="pass" id="pass" value=""  placeholder="Password"/>
      <input name="pwd" id="pws" value=""  type="password"/>
                <input type="submit" name="name" value="Submit" />
          </form>
相关文章：