Question

在我的静态登录网页中

我想将<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()" />

连接速度慢会改变我的密码字体，那么有没有永久的解决方案？

Answer 1

这是一个适合你的工作。添加样式为 display：none＆amp;的密码输入字段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>

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

1 个答案: