How to bind to browser change of input field? (jQuery)

Question

Please take a look at this: http://jsfiddle.net/sduBQ/1/

Html:

    


        
                      

              相关标签:
       
      

Answer 1

I had the same issue. None of the solutions I found worked nicely enough. I ended up with this:

If it doesn't matter that your input fields have a background, I handled it just in CSS.

jsfiddle

I just gave the .inputPlaceholder { z-index: -1; } so that it aligned behind the input field and then set the input { background: transparent; } so you could see the div behind it.

Google's default -webkit-autofill style has a yellow background, so that just covers up your placeholder behind it all. No need to mess around with custom plugins/events/setIntervals.

Answer 2

I've haven't run into this myself, but it appears to be a common issue, based on a few quick Google Searches.

• FireFox capture autocomplete input change event
• http://bugs.jquery.com/ticket/7830

One easy hack you could do is set up some code that runs every second or two via setInterval, and checks to see if the field has a value.

Something like this...

var code = $('#code');
var codeTip = $('#codetip');
var interval = setInterval(function(){
    if (code.val()!=''){
        codeTip.hide();
        clearInterval(interval);
    }
}, 1000);