Javascript检测选择的浏览器AutoComplete值

时间:2011-03-25 08:56:14

标签: javascript input autocomplete onchange

我有一个带有onkeyup事件的文本字段。但是当我选择浏览器autoComplete值时,不会触发此事件。我添加了一个onclick事件,但它不起作用。

我已经测试了stackoverflow上发布的许多解决方案,用于捕获浏览autocoComplete选项,但没有解决此问题。

尝试这个简单的示例来查看问题(在Firefox 3.6,Chrome 10.0和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>

谢谢!

1 个答案:

答案 0 :(得分:8)

较新的浏览器支持oninput事件:

$(function () {
  $('#myInput').on("input",function() {
    $('#divResult').text($(this).val());
  });
});

<input id="myInput" name="myInput" type="text" value="" />

如果您需要支持旧浏览器,请尝试

var tId = "";
function monitor() {
 $('#divResult').text($('#myInput').val());
}

$(function () {
  $('#myInput')
  .focus(function() {
      tId=setInterval(monitor,100);
  })
  .blur(function() {
      clearInterval(tId);
  });
});