12

I've made a login form which contains the labels for 'username' and 'password', with the below jquery used to hide the labels once the user focuses on the field.

$(document).ready(function(){

 $("form.login input")
  .bind("focus.labelFx", function(){
   $(this).prev().hide();
  })
  .bind("blur.labelFx", function(){
   $(this).prev()[!this.value ? "show" : "hide"]();
  })
  .trigger("blur.labelFx");

});

and the html:

<form method="post" id="login-form" action="/accounts/login/">
    <div class="input-wrapper">
        <label for="id_username">Username</label>
        <input id="id_username" size="30" type="text" name="username">
    </div>
</form>

The problem is that chrome's autocomplete appears to be loading the username and password before this scrip can catch it, giving me strangely overlapping text until I manually focus on it. This is not a problem with Firefox. Pic: https://i.stack.imgur.com/nZXji.jpg

Any suggestions on how to fix this so that autofilled data causes the labels to hide?

Marcel Korpel
  • 21,536
  • 6
  • 60
  • 80
IanWhalen
  • 801
  • 11
  • 29
  • Have you tried turning off Autocomplete for the textbox? A lot of people have troubles with Autocomplete and it has been asked before on SO. Check this question for how to do it. http://stackoverflow.com/questions/2530/how-do-you-disable-browser-autocomplete-on-web-form-field-input-tag – sarcastyx Jan 28 '11 at 00:02
  • I understand that would sort-of solve my problem, but I do like autocomplete in theory and I'd like people to be able to use it to prepopulate their username and password. So, worst case scenario I can indeed do that, but I'd rather find a solution that lets me keep autocomplete and hide the labels. – IanWhalen Jan 28 '11 at 00:09

5 Answers5

7

After reading Benjamin Miles tutorial I noticed you can detect chromes autofill with jquery like so:

$(window).load(function(){
   if($('input:-webkit-autofill')){
      //Remove Label Function
   }        
});

Note that you must place the code in $(window).load(function(){});

and not 

$(document).ready(function(){})
Jon Egerton
  • 40,401
  • 11
  • 97
  • 129
mwicks7
  • 93
  • 2
  • 5
6

Chrome (and, equivalently, Google Toolbar's Autofill on other browsers) is a bad citizen of the web with its form filling behavior. When it fills in form fields, it does not fire the normal events. If you don't wish to disable autofill, you can set up a timed event which periodically checks to see if autofill has occurred.

The first answer (by the question asker) of this SO question is one example solution.

Community
  • 1
  • 1
Conspicuous Compiler
  • 6,403
  • 1
  • 40
  • 52
2

You can try injecting a placeholder attribute from controller like this

setTimeout(function() {
function compile(element) {
    var el = angular.element(element);
    $scope = el.scope();
    $injector = el.injector();
    $injector.invoke(function($compile) {
        $compile(el)($scope)
    })
}
var elem = document.querySelectorAll(':-webkit-autofill');
for (i = 0; i < elem.length; ++i) {
    elem[i].setAttribute("placeholder", "");
    compile(elem);
}}, 500);
David
  • 21
  • 2
0

You could also use the following

var wait = window.setTimeout( function(){
//Pseduo code
label.style.display = "none";
},5);

After 5 milliseconds the code is executed and the label gets hidden.

rharvey
  • 1,987
  • 1
  • 28
  • 23
0

input:-webkit-autofill Add required styles for -webkit-autofill properties to fix the overlapping issue.

kaalee
  • 1