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

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

18 голосов
/ 21 октября 2008

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

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

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

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

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

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

РЕДАКТИРОВАТЬ: похоже, у меня была проблема с кэшированием моего файла js, так как позже я проверил тот же код, и он работал просто отлично. Я бы удалил вопрос, но не уверен, что это потеряет репутацию для добрых людей, которые отправили идеи:)

Ответы [ 6 ]

24 голосов
/ 21 октября 2008

Можете ли вы опубликовать свой код? Я не нахожу никаких проблем с этим. Протестировано на 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)" />
7 голосов
/ 21 октября 2008

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

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

5 голосов
/ 26 ноября 2015

Чтобы дать современный подход к этому вопросу. Это хорошо работает, включая 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);
3 голосов
/ 21 октября 2008 
<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, чтобы получить новое значение элемента управления вводом HTML. Надеюсь, это поможет.

1 голос
/ 21 октября 2008

Вы можете попробовать этот код (требуется 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>
0 голосов
/ 21 октября 2008

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

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

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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...