html <input type = «text» /> событие onchange не работает


88

Я пытаюсь провести эксперимент. Я хочу, чтобы каждый раз, когда пользователь вводил что-то в текстовое поле, это отображалось в диалоговом окне. Я использовал onchangeсвойство события, чтобы это произошло, но это не работает. Мне все еще нужно нажать кнопку отправки, чтобы все заработало. Я читал об AJAX и думаю узнать об этом. Мне все еще нужен AJAX, чтобы он работал, или достаточно простого JavaScript? Пожалуйста помоги.

index.php

<script type="text/javascript" src="javascript.js"> </script>

<form action="index.php" method="get">
 Integer 1: <input type="text" id="num1" name="num1" onchange="checkInput('num1');" /> <br />
 Integer 2: <input type="text" id="num2" name="num2" onchange="checkInput('num2');" /> <br />
 <input type="submit" value="Compute" />
</form>

javascript.js

function checkInput(textbox) {
 var textInput = document.getElementById(textbox).value;

 alert(textInput); 
}

4
вы можете отправить «this» вместо идентификатора, поэтому вам не нужно вызывать getElementById
remi bourgarel

Да ... спасибо, что я сделал то, что сказал мне Эш Бурлаченко ...
Newbie Coder

С JQuery здесь предлагается хорошее решение: stackoverflow.com/a/8167009/2065594
Cyril Jacquart

Ответы:


127

onchangeсрабатывает только тогда, когда элемент управления размыт. Попробуйте onkeypressвместо этого.


19
Не работает для обнаружения изменений после пользовательских
вставок

19
Это решило мою проблему. Я предпочитаю onkeyup, поскольку он получает новое значение в input('element.value')
stealthjong

4
Я также заметил, что "нажатие клавиши" не появляется после нажатия клавиши Backspace, по крайней мере, при использовании jquery. "keyup" поднимается после нажатия и отпускания backspace. "input" решает эту проблему, а также работает для копирования и вставки, и я думаю, что это правильное решение здесь (как указывает ниже пользователь "99 Problems - Syntax ain't one").
Патрик Финниган,

4
'onkeypres', 'onkeyup' и т. д. не являются решением, когда нужно вызвать функцию только в том случае, если текст изменился ! Ключевые события в этом случае создают ненужный трафик. (Очень странно, что этот ответ был выбран в качестве решения, особенно с таким большим количеством голосов !! Я не голосую против него, потому что мне не нравится просто отрицать ответы. Я предпочитаю указывать причину (ы), почему это не ОК - это
Апостолос

Для HTML ≥5 или jQuery ≥1.7 ниже приведены другие решения, которые также обрабатывают вставку из буфера обмена.
user202729 02

41

Используется .on('input'...для отслеживания каждого изменения ввода (вставка, ввод с клавиатуры и т. Д.) Из jQuery 1.7 и выше.

Для статических и динамических входов:

$(document).on('input', '.my-class', function(){
    alert('Input changed');
});

Только для статических входов:

$('.my-class').on('input', function(){
    alert('Input changed');
});

JSFiddle со статическим / динамическим примером: https://jsfiddle.net/op0zqgery/7/


У меня это отлично сработало - спасибо. Примечание для других - не забудьте на самом деле выполнить приведенный выше код в своем onLoad или что-то еще, чтобы он «начал» мониторинг.
Роберт Пенридж

Слишком поздно для комментариев, но ... Почему вы предлагаете использовать jQuery, если отвечающий пользователь показывает простой JavaScript?
Андрес Моралес,

@ AndrésMorales Это обычная библиотека, к которой многие приложения имеют немедленный доступ, и ее легко добавить к тем, у которых нет. Очевидно, что этот ответ не относится к тем приложениям, которые не могут (или не хотят) использовать jQuery.
rybo111,

@ rybo111 Совершенно верно! jQuery - это распространенная и широко используемая библиотека, но она напрямую связана в моем мозгу с вопросом-мемом о «суммировании двух чисел с помощью JavaScript» и самым популярным ответом об использовании jQuery для этого. Это не так, но многие люди не могут разделить JavaScript и jQuery.
Андрес Моралес,

@ AndrésMorales Обратите внимание, что мой ответ касается «вставки, нажатия клавиш и т. Д.». Я помню, что решение jQuery было удобным, когда я ответил на этот вопрос (7 лет назад!).
rybo111,

30

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

К сожалению, нет никакого события "onchange", которое немедленно сообщает об изменениях, по крайней мере, насколько мне известно. Но есть решение, которое работает во всех случаях: настроить событие времени с помощью setInterval ().

Допустим, у вашего поля ввода есть идентификатор и название «город»:

<input type="text" name="city" id="city" />

Имейте глобальную переменную с именем "city":

var city = "";

Добавьте это в инициализацию своей страницы:

setInterval(lookForCityChange, 100);

Затем определите функцию lookForCityChange ():

function lookForCityChange()
{
    var newCity = document.getElementById("city").value;
    if (newCity != city) {
        city = newCity;
        doSomething(city);     // do whatever you need to do
    }
}

В этом примере значение «city» проверяется каждые 100 миллисекунд, которое вы можете настроить в соответствии со своими потребностями. Если хотите, используйте анонимную функцию вместо определения lookForCityChange (). Имейте в виду, что ваш код или даже браузер могут предоставить начальное значение для поля ввода, поэтому вы можете быть уведомлены об «изменении» до того, как пользователь что-либо сделает; при необходимости скорректируйте свой код.

Если идея события синхронизации, срабатывающего каждую десятую секунды, кажется неуместной, вы можете запустить таймер, когда поле ввода получает фокус, и завершить его (с помощью clearInterval ()) при размытии. Я не думаю, что можно изменить значение поля ввода без получения фокуса, поэтому включение и выключение таймера таким образом должно быть безопасным.


1
Если невозможно изменить значение поля ввода без получения фокуса и размытие происходит, когда элемент теряет фокус, почему бы просто не поискать изменения в onblur?
Pakman

Вы хотите действовать, когда поле ввода изменяется или теряет фокус после изменения? Если вы хотите действовать немедленно, вы не можете дождаться onblur.
Dragonfly

@Pakman В некоторых случаях это хорошее решение. Но если вы хотите выполнять поиск по мере ввода - очень приятная функция, IMO (почему пользователь должен искать что-то, когда компьютер может делать это намного быстрее и без скуки?) - или что-нибудь еще, что действительно должно происходить при изменении текста, почему бы и нет?
Даг

Так грустно, что до этого доходит.
Чак Бэтсон

1
@ChuckBatson Это ответ 2012 года. Я заметил, что вы разместили свой комментарий в 2016 году. Посмотрите мой ответ, если вы используете jQuery, теперь это невероятно просто.
rybo111

26

HTML5 определяет oninputсобытие для отслеживания всех прямых изменений. меня устраивает.


1
также работает с элементом управления счетчиком type = "number" (с которым onkeypress не работает).
Боб

13

onchange происходит только тогда, когда изменение элемента ввода зафиксировано пользователем, в большинстве случаев это происходит, когда элемент теряет фокус.

если вы хотите, чтобы ваша функция запускалась каждый раз при изменении значения элемента, вы должны использовать oninput событие - это лучше, чем события нажатия клавиш вверх / вниз, поскольку значение может быть изменено с помощью мыши пользователя, т.е. вставлено или автозаполнено и т. д.

Подробнее о событии изменения читайте здесь

Подробнее о событии ввода читайте здесь


11

используйте следующие события вместо "onchange"

- onkeyup(event)
- onkeydown(event)
- onkeypress(event)

6

Во-первых, что «не работает»? Вы не видите предупреждение?

Кроме того, ваш код можно упростить до этого

<input type="text" id="num1" name="num1" onkeydown="checkInput(this);" /> <br />

function checkInput(obj) {
    alert(obj.value); 
}

2

Я столкнулся с проблемами, когда Safari не запускал события «onchange» в поле ввода текста. Я использовал событие «изменения» jQuery 1.7.2, и оно тоже не сработало. В итоге я использовал событие textchange ZURB. Он работает с событиями мыши и может запускаться, не покидая поля:
http://www.zurb.com/playground/jquery-text-change-custom-event

$('.inputClassToBind').bind('textchange', function (event, previousText) {
    alert($(this).attr('id'));
});

2

Пара комментариев, которые важны для ИМО:

  • элементы input не генерируют событие 'change', пока действие USER ENTER или blur await не является правильным .

  • Событие, которое вы хотите использовать, - это "input"oninput »). Вот хорошо продемонстрировано различие между ними: https://javascript.info/events-change-input

  • Два события сигнализируют о двух разных пользовательских жестах / моментах (событие «input» означает, что пользователь пишет или перемещается по параметрам списка выбора, но все еще не подтверждает изменение. «Change» означает, что пользователь действительно изменил значение (с вводом или размытием наш)

  • Прислушиваться к ключевым событиям, как многие здесь рекомендуют, в этом случае - плохая практика. (как люди, изменяющие поведение ENTER по умолчанию на входах) ...

  • jQuery не имеет к этому никакого отношения. Все это в стандарте HTML.

  • Если у вас есть проблемы с пониманием, ПОЧЕМУ это правильное поведение, возможно, это будет полезно, в качестве эксперимента используйте свой текстовый редактор или браузер без мыши / клавиатуры, только с клавиатурой.

Мои два цента.


1

onkeyup у меня сработал. onkeypress не срабатывает при нажатии на пробел.


что, когда значение вставлено? Я также использую «onpaste», чтобы вызвать событие
Луи

1

Лучше использовать onchange(event)с <select>. С <input>вы можете использовать ниже события:

- onkeyup(event)
- onkeydown(event)
- onkeypress(event)

-3

попробуй onpropertychange. это работает только для IE.


6
Зачем кому-то рассматривать свойство, которое работает только в УСТАРЕВШЕМ БРАУЗЕРЕ, от которого отказался его разработчик? Голосовать против.
Sod Almighty
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.