Javascript обнаруживает выбор значения автозаполнения браузера - PullRequest
Новая
       14

Javascript обнаруживает выбор значения автозаполнения браузера

9 голосов
/ 25 марта 2011

У меня есть текстовое поле с событием onkeyup.Но это событие не срабатывает, когда я выбираю значение автозаполнения браузера.Я добавил событие 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 Ответ

8 голосов
/ 25 марта 2011

Новые браузеры поддерживают событие 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);
  });
});
...