2

Let's say I have an HTML form to allow a user to sign in to a web site. The form is not statically visible, but shown on-demand via a Bootstrap Popover.

This works as intended except for one tiny detail: The browser's password manager does not offer auto-completion of credentials in this form (most probably because it is not visible at the time the page is initially rendered).

Adding autocomplete="on" to the form and the input elements did not change anything.

Is there any way to trigger the form completion again after the login form has become visible?

The form looks like this:

<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>

The popover is shown using:

$(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>'
)
Thilo-Alexander Ginkel
  • 6,898
  • 10
  • 45
  • 58
  • Can you include the code for how you are triggering the popover as well. – BillPull Feb 13 '13 at 20:01
  • have you tried `visibility: hidden;`? – Eric Goncalves Feb 14 '13 at 20:28
  • @EricLemos: Unfortunately, that won't work with a Bootstrap Popover. – Thilo-Alexander Ginkel Feb 20 '13 at 18:23
  • @Thilo-AlexanderGinkel you have a syntax error in your popover code should be passing an object in {} to the popover method. Also it seems to work fine for me http://jsfiddle.net/billpull/4zJvM/ I opened the popover typed in a username and submitted the form, I come back and start typing and the previous submission data is suggested. – BillPull Feb 20 '13 at 19:06
  • @BillPull: Sorry, forgot to mention that this is CoffeeScript where the syntax used is perfectly valid. – Thilo-Alexander Ginkel Feb 20 '13 at 19:41
  • @BillPull: Which browser are you using? The jsfiddle you referenced does not work for me on Chrome 25 (I get a 'save password' prompt, but auto-completion never happens). Maybe we have a different understanding of what I mean with password autofill. In my understanding, autofill is different from auto-completion in that it does not require typing, but the form comes up pre-filled w/o any need for manual intervention, which is the case for non-popover login forms. – Thilo-Alexander Ginkel Mar 01 '13 at 15:47
  • 1
    Oh I misunderstood your question. You wanted saved login information to be put into the form. Afaik this is not possible because that data is applied on document load and there does not seem to be a way to apply it again. As this question points out your best bet is probably mimicking the popover in html and hiding it in css http://stackoverflow.com/questions/2267543/do-browsers-support-autocomplete-for-ajax-loaded-login-forms-at-all – BillPull Mar 05 '13 at 06:56
  • 1
    You could try to put it on an iframe. Even if it's deprecated it would work. – n1xx1 Mar 08 '13 at 11:35
  • iframe, seriously? :P – Jonast92 Mar 14 '13 at 16:17

1 Answers1

0

Most of the browsers ( if not all ) trigger autofill on the page's initial load, so if the dom is manipulated in a second moment there in no autofill. A solution is to put the login form on the page.

Sandro
  • 236
  • 1
  • 8