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);
}
658   11  

11 ответов:

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

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

к сожалению, нет события "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/

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

используйте следующие события вместо "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)

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

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

Comments

    Ничего не найдено.