Question

假设我有一个HTML表单，允许用户登录网站。表单不是静态可见的，而是通过Bootstrap Popover按需显示。

除了一个小细节之外，它的工作原理如下：浏览器的密码管理器不提供此表单中凭据的自动完成（很可能是因为它在最初呈现页面时不可见）。

将autocomplete="on"添加到表单中，输入元素不会改变任何内容。

登录表单可见后，有没有办法再次触发表单完成？

表格如下：

<div id="login_popover_content">
  <form accept-charset="UTF-8" action="/users/sign_in" autocomplete="on" class="form-horizontal" id="new_user_popover" method="post"><div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="✓"><input name="authenticity_token" type="hidden" value="..."></div>
  <fieldset>
    <div class="control-group">
      <label class="control-label" for="user_login">User</label>

      <div class="controls">
        <input autocomplete="on" class="input-medium" id="user_login" name="user[login]" size="30" type="text">
      </div>
    </div>
    <div class="control-group">
      <label class="control-label" for="user_password">Password</label>

      <div class="controls">
        <input class="input-medium" id="user_password" name="user[password]" size="30" type="password">
        <span class="help-block"><a href="/users/password/new">Forgot your password?</a></span>
      </div>
    </div>
    <div class="control-group">
      <div class="controls pull-right">
        <input class="btn btn-warning pull-right" name="commit" type="submit" value="Login">
      </div>
    </div>
  </fieldset>
  </form>
</div>

弹出窗口使用：

显示

$(anchor).popover(
  content: $(content).html()
  placement: 'bottom'
  html: true
  trigger: 'click'
  template: '<div class="popover headless"><div class="arrow"></div><div class="popover-inner"><div class="popover-content"><p></p></div></div></div>'
)

Answer 1

大多数浏览器（如果不是全部）在页面的初始加载时触发自动填充，因此如果在第二时刻操作dom，则不会自动填充。解决方案是将登录表单放在页面上。

触发动态popover HTML表单的密码自动填充

1 个答案: