Как получить новое значение ввода 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
.
Также убедитесь, что вы прикрепляете обработчик событий с помощью метода, совместимого с несколькими браузерами...