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/op0zqrgy/7/

Перевірка натискань клавіш є лише частковим рішенням, оскільки можна змінити вміст поля введення за допомогою клацання миші. Якщо клацнути правою кнопкою миші в текстовому полі, у вас з’являться опції вирізання та вставки, які можна використовувати для зміни значення без натискання клавіші. Так само, якщо ввімкнено автозаповнення, ви можете клацнути лівою клавішею миші в поле і отримати випадаючий список раніше введеного тексту, і ви можете вибрати один із своїх варіантів за допомогою клацання миші. Захоплення натисканням клавіші не виявить жодного з цих типів змін.

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

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, і вона теж не спрацювала. У підсумку я використав подію обміну текстом ZURB. Він працює з подіями миші і може спрацьовувати, не виходячи з поля:
http://www.zurb.com/playground/jquery-text-change-custom-event

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

Кілька коментарів, які важливі для ІМО:

• вхідні елементи не видають події "зміни", доки дія КОРИСТУВАЧА ENTER або розмиття не очікує правильної поведінки .

• Подією, яку ви хочете використовувати, є "input"(" oninput "). Ось добре продемонстровано різницю між ними: https://javascript.info/events-change-input

• Дві події сигналізують про два різні жести / моменти користувача (подія "введення" означає, що користувач пише або переходить до параметрів вибраного списку, але все одно не підтверджує зміну. ​​"Зміна" означає, що користувач змінив значення (за допомогою введення або розмиття) наш)

• У цьому випадку прослуховування ключових подій, як рекомендується багатьма, є поганою практикою. (як люди, що змінюють поведінку за замовчуванням ENTER на входах) ...

• jQuery не має нічого спільного з цим. Це все в стандарті HTML.

• Якщо у вас є проблеми з розумінням, ЧОМУ це правильна поведінка, можливо, це корисно, оскільки експериментуйте, використовуйте текстовий редактор або браузер без миші / клавіатури, просто клавіатури.

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

onkeyup працював у мене. onkeypress не спрацьовує при натисканні пробілу.

Краще використовувати onchange(event)с <select>. За допомогою <input>ви можете використовувати подію нижче:

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

спробуй onpropertychange. це працює лише для IE.