Geek Answers Handbook

Javascript detects browser autofill value selection

I have a text box with an onkeyup event. But this event does not fire when I select the browser autocomplete value. I added the onclick event, but it does not work.

I tested many solutions hosted on stackoverflow to find an autocoComplete choice, but nothing solved this problem.

Try this simple example to see the problem (reproduced on Firefox 3.6, Chrome 10.0, and IE8):

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <title>Test</title> <script type="text/javascript" src="http://code.jquery.com/jquery-1.5.1.min.js"></script> <script type="text/javascript"> //<![CDATA[ function onkeyupInput(){ $('#divResult').text($('#myInput').val()); } //]]> </script> </head> <body> <form name="myForm" action="#"> Tape a value and send it. Then select this value with your browser AutoComplete value :<br /> <input id="myInput" name="myInput" type="text" onkeyup="onkeyupInput();" onclick="onkeyupInput();" value="" /> <input type="submit" /> </form> Result of onkeypress and onclick : <div id="divResult"></div> <br /> <b>The issue : Result of onkeypress and onclick is not update when an autocomplete value of a browser is selected.</b> </body> </html>

Thanks!

+8
javascript input autocomplete onchange
source share
1 answer

New browsers support the oninput event:

 $(function () { $('#myInput').on("input",function() { $('#divResult').text($(this).val()); }); }); 
 <input id="myInput" name="myInput" type="text" value="" />

If you need to support older browsers, try

 var tId = ""; function monitor() { $('#divResult').text($('#myInput').val()); } $(function () { $('#myInput') .focus(function() { tId=setInterval(monitor,100); }) .blur(function() { clearInterval(tId); }); });
+8
source share

More articles:


All Articles