html onchange событие не работает
Я пытаюсь сделать некоторый эксперимент. Я хочу, чтобы каждый раз, когда пользователь вводит что-то в текстовое поле, оно будет отображаться в диалоговом окне. Я использовал onchange свойство события, чтобы это произошло, но это не работает. Мне все еще нужно нажать кнопку Отправить, чтобы заставить его работать. Я читал об Аяксе и думаю узнать об этом. Мне все еще нужен 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);
}
11 ответов:
проверка нажатий клавиш является только частичным решением, потому что можно изменить содержимое поля ввода с помощью щелчков мыши. Если вы щелкните правой кнопкой мыши на текстовом поле, у вас будут параметры вырезания и вставки, которые можно использовать для изменения значения без нажатия клавиши. Кроме того, если автозаполнение включено, то вы можете щелкнуть левой кнопкой мыши в поле и получить выпадающий список ранее введенного текста, и вы можете выбрать один из ваших вариантов с помощью мыши. Нажатие клавиши захвата не будет обнаружьте любой из этих типов изменений.
к сожалению, нет события "onchange", которое немедленно сообщает об изменениях, по крайней мере, насколько я знаю. Но есть решение, которое работает для всех случаев: настроить событие синхронизации с помощью setInterval ().
предположим, что ваше поле ввода имеет идентификатор и имя "город":
<input type="text" name="city" id="city" />есть глобальная переменная с именем "город":
var city = "";добавьте это в инициализацию страницы:
setInterval(lookForCityChange, 100);затем определите a 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()) при размытии. Я не думаю, что можно изменить значение поля ввода без его получения фокуса, поэтому включение и выключение таймера таким образом должно быть безопасным.
использовать
.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/
используйте следующие события вместо "onchange"
- onkeyup(event) - onkeydown(event) - onkeypress(event)
onchangeпроисходит только тогда, когда изменение элемента ввода фиксируется Пользователем, в большинстве случаев это происходит, когда элемент теряет фокус.Если вы хотите, чтобы ваша функция срабатывала каждый раз, когда изменяется значение элемента, вы должны использовать
oninputсобытие-это лучше, чем ключевые события up/down, поскольку значение может быть изменено с помощью мыши пользователя, т. е. вставлено или автоматически заполнено и т. д.
во-первых, что 'не работает'? Разве вы не видите предупреждение?
кроме того, ваш код может быть упрощен до этого
<input type="text" id="num1" name="num1" onkeydown="checkInput(this);" /> <br /> function checkInput(obj) { alert(obj.value); }
я столкнулся с проблемами, когда Safari не запускал события "onchange" в поле ввода текста. Я использовал событие jQuery 1.7.2 "change", и оно тоже не сработало. В итоге я использовал событие textchange ZURB. Он работает с mouseevents и может стрелять, не выходя из поля:
http://www.zurb.com/playground/jquery-text-change-custom-event$('.inputClassToBind').bind('textchange', function (event, previousText) { alert($(this).attr('id')); });
лучше использовать
onchange(event)С<select>. С<input>вы можете использовать ниже событий:- onkeyup(event) - onkeydown(event) - onkeypress(event)
Comments