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

Я пытаюсь провести эксперимент. Я хочу, чтобы каждый раз, когда пользователь вводил что-то в текстовое поле, это отображалось в диалоговом окне. Я использовал 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); 
}

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

Используется .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/

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

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

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

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

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

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

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

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

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

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

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

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

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

Я столкнулся с проблемами, когда 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'));
});

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

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

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

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

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

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

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

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

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

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

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

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