Как получить новое значение ввода HTML после того, как нажатие клавиши изменило его?

У меня есть поле ввода HTML

<input type="text" id="foo" value="bar">

Я подключил обработчик для события "keyup", но если я извлечу текущее значение поля ввода во время обработчика события, я получаю значение как было, а не так, как будет!

Я попытался собрать события "keypress" и "change", одну и ту же проблему.

Я уверен, что это просто решить, но в настоящее время я считаю, что единственным решением для меня является использование короткого таймаута для запуска кода в несколько миллисекунд в будущем!

В любом случае, чтобы получить текущее значение во время этих событий?

EDIT: похоже, у меня была проблема с кешированием с моим файлом js, так как позже я проверил один и тот же код, и он работал нормально. Я бы удалил вопрос, но не уверен, что он теряет репутацию для добрых людей, которые разместили идеи:)

Ответ 1

Можете ли вы разместить свой код? Я не нахожу никаких проблем с этим. Протестировано на Firefox 3.01/safari 3.1.2 с помощью:

function showMe(e) {
// i am spammy!
  alert(e.value);
}
....
<input type="text" id="foo" value="bar" onkeyup="showMe(this)" />

Ответ 2

Существует два типа входного значения: поле свойство и поле html атрибут.

Если вы используете событие keyup и field.value, вы получаете текущее значение поля. Это не тот случай, когда вы используете field.getAttribute('value'), который возвращал бы то, что в атрибуте html (value = ""). Свойство представляет то, что было введено в поле, и изменяется по мере ввода, в то время как атрибут не изменяется автоматически (его можно изменить с помощью метода field.setAttribute).

Ответ 3

<html>
    <head>
        <script>
        function callme(field) {
            alert("field:" + field.value);
        }
        </script>
    </head>
    <body>
        <form name="f1">
            <input type="text" onkeyup="callme(this);" name="text1">
        </form>
    </body>
</html>

Похоже, вы можете использовать onkeyup для получения значения new элемента управления ввода HTML. Надеюсь, что это поможет.

Ответ 4

Придать современный подход к этому вопросу. Это хорошо работает, включая Ctrl + v. GlobalEventHandlers.oninput.

var onChange = function(evt) {
  console.info(this.value);
  // or
  console.info(evt.target.value);
};
var input = document.getElementById('some-id');
input.addEventListener('input', onChange, false);

Ответ 5

Вы можете попробовать этот код (требуется jQuery):

<html>
<head>
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            $('#foo').keyup(function(e) {
                var v = $('#foo').val();
                $('#debug').val(v);
            })
        });
    </script>
</head>
<body>
    <form>
        <input type="text" id="foo" value="bar"><br>
        <textarea id="debug"></textarea>
    </form>
</body>
</html>

Ответ 6

Здесь - таблица различных событий и уровней поддержки браузера. Вам нужно выбрать событие, которое поддерживается, по крайней мере, во всех современных браузерах.

Как вы увидите из таблицы, события keypress и change не имеют равномерной поддержки, тогда как событие keyup.

Также убедитесь, что вы прикрепляете обработчик событий с помощью метода, совместимого с несколькими браузерами...