CODEWITHSUNDEEP
javascriptbrowsercross-browser
nivanka
nivanka

Reputation: 1372

browser auto fill event

I am doing some website where I have a login form. I know people can save their usernames and passwords on these in their web browsers.

I need to show / hide a label (<label></label>). if the field is empty then the label has to appear, if there is any value in the field then the label has to hide, but this doesn't work with the browser autocomplete, is there anyway I can track this?

I tried with: 

jQuery.change();

but that doesn't work.

Is there anything I can do about this rather than turning autocomplete off?

Upvotes: 3

Views: 958

Answers (3)

LZW
LZW

Reputation: 1045

You have to manually trigger the change event:

$("#username")
.change(function () {
    // do stuff on change (check for default)
})
.trigger("change");

or use some watermark library if you only want to toggle default text (or the placeholder attribute with Modernizr as aviraldg recommends).

Upvotes: 0

Marc Brown
Marc Brown

Reputation: 641

This is very simple.
I use this for my site's text fields.

This coding is in Javascript text.

  1. create a <form> with name and id = "comform" (you can change this later; just for reference).
  2. create an <input type = "text" with name and id = "Message" (you can change this later; just for reference).
  3. create a <div> with id = "ifsend" (you can change this later; just for reference).

Also create a variable to store the length in. var numbering (you can change this later; just for reference). 

function counter() {
    var numbering;
    numbering = document.forms["comform"]["Message"].value.length;
    if (numbering == 0) {
        label();
    }
    if (numbering != 0) {
        document.getElementById('ifsend').innerHTML="";
    }
}

function label() {
    document.getElementById('ifsend').innerHTML="Your form value is empty";
}

Upvotes: -1

aviraldg
aviraldg

Reputation: 9164

The norm here is to use the placeholder attribute on the relevant input element:

<input type="text" placeholder="username">

username will be displayed within the input when there's no text, and hidden otherwise. If you're using this, then you should probably also use something like Modernizr to detect support and create a normal text label otherwise.

Upvotes: 1

Related Questions