Mootools OverText and Email/Password Autocomplete

Question

I am working on a login form on which I have added "placeholders" with Mootools OverText (* http://mootools.net/docs/more/Forms/OverText , http://mootools.net/demos/?demo=Enhanced-Form ).

The problem is that the browsers is autocompleting the fields with email/password and they are showing under the OverText. Is there any way I can make the overtext not show when the fields are filled by the browser? (*I would like to keep the autocomplete ON)

*When the browser is autocompleting the fields the OverText is showing over the email/password:

When the browser is autocompleting the fields

**Normal view of the fields with OverText:

normal view of the fields with OverText

<form id="user_form_login" action="/login">
    <div id="email-wrapper" class="form-wrapper">
      <div id="email-element" class="form-element">
        <input type="email" name="email" id="email" value="" tabindex="1" class="text" autocomplete="off" title="<?php echo $this->translate('Email Address'); ?>">
      </div>
    </div>

    <div id="password-wrapper" class="form-wrapper">
      <div id="password-element" class="form-element">
        <input type="password" name="password" id="password" value="" tabindex="2" title="<?php echo $this->translate('Password'); ?>">
      </div>
    </div>
</form>

<script type="text/javascript">
window.addEvent('domready', function(){
  var LoginForm = $('user_form_login');
  LoginForm.getElements('[type=email], [type=password]').each(function(el){
    new OverText(el);
  });
});
</script>

I don't see how this could be done with CSS, but have a look at the screenshots above. I can't simulate the browser autocomplete in a fiddle. — George, Aug 31 '13 at 12:25

score 1 · Accepted Answer · edited May 23 '17 at 10:32

1

Try this:

<script type="text/javascript">
window.addEvent('domready', function(){
  var LoginForm = $('user_form_login');
  LoginForm.getElements('[type=email], [type=password]').each(function(el){
    new OverText(el);
  });
  // *** New part ***
  LoginForm.getElements('[type=email], [type=password]').addEvent('change', function () {
        this.getNext('label').set('text', '');
    });
});
</script>

EDIT:
(Another alternative since its difficult to detect auto-fill)

var All_El = LoginForm.getElements('[type=email], [type=password]');
var re_check = setInterval(function () {
    All_El.each(function (el) {
        if (el.value != '') {
            el.getNext('label').set('text', '');
        }
    });
}, 400);

edited May 23 '17 at 10:32

Community

1
1

answered Aug 31 '13 at 12:36

Sergio

28,539
11
85
132

Does not work, but might be close. I don't think this autofill can be detected with 'change' – George Aug 31 '13 at 12:49
@Bogh, is it the browsers autofill ? – Sergio Aug 31 '13 at 12:51
Yes, at this I am reffering, browser autofill/autocomplete – George Aug 31 '13 at 12:52
1

@Bogh, check the other alternative in my answer. – Sergio Aug 31 '13 at 13:04
Thanks, I will see what I can do with this :) – George Aug 31 '13 at 13:16

Mootools OverText and Email/Password Autocomplete

1 Answers1