Подтвердить что ты не робот

Html <input type = "text" /"> onchange event не работает

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

ОТВЕТЫ

Ответ 1

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

Ответ 2

Используйте .on('input'..., чтобы отслеживать каждое изменение ввода (вставка, keyup и т.д.) из jQuery 1.7 и выше.

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

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

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

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

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

Ответ 3

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

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

Скажем, что ваше поле ввода имеет идентификатор и имя "город" :

<input type="text" name="city" id="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
    }
}

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

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

Ответ 4

HTML5 определяет событие oninput, чтобы уловить все прямые изменения. он работает для меня.

Ответ 5

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

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

Ответ 6

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

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

Подробнее о событии change здесь

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

Ответ 7

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

Кроме того, ваш код может быть упрощен к этому

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

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

Ответ 8

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

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

Ответ 9

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

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

Ответ 10

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

Ответ 11

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

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

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

  • Два события сигнализируют о двух различных пользовательских жестах/моментах (событие "enter" означает, что пользователь пишет или перемещается по опциям списка выбора, но все еще не подтверждает изменение. "Изменение" означает, что пользователь изменил значение (с вводом или размытием) наш)

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

  • JQuery не имеет ничего общего с этим. Это все в стандарте HTML.

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

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

Ответ 12

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