html <input type = “text” /> zdarzenie onchange nie działa

Próbuję zrobić jakiś eksperyment. Chcę, aby za każdym razem, gdy użytkownik wpisze coś w polu tekstowym, zostanie to wyświetlone w oknie dialogowym. Użyłem onchangewłaściwości event, aby to się stało, ale to nie działa. Nadal muszę nacisnąć przycisk przesyłania, aby to zadziałało. Czytałem o AJAX i myślę, żeby się o tym dowiedzieć. Czy nadal potrzebuję AJAX, aby działał, czy wystarczy prosty JavaScript? Proszę pomóż.

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

onchangejest uruchamiany tylko wtedy, gdy kontrola jest zamazana. Spróbuj onkeypresszamiast tego.

Służy .on('input'...do monitorowania każdej zmiany danych wejściowych (wklejanie, kluczowanie itp.) Z jQuery 1.7 i nowszych.

Dla wejść statycznych i dynamicznych:

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

Tylko dla wejść statycznych:

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

JSFiddle ze statycznym / dynamicznym przykładem: https://jsfiddle.net/op0zqrgy/7/

Sprawdzanie naciśnięć klawiszy jest tylko częściowym rozwiązaniem, ponieważ można zmienić zawartość pola wejściowego za pomocą kliknięć myszą. Jeśli klikniesz prawym przyciskiem myszy pole tekstowe, uzyskasz opcje wycinania i wklejania, których możesz użyć do zmiany wartości bez naciskania klawisza. Podobnie, jeśli autouzupełnianie jest włączone, możesz kliknąć lewym przyciskiem myszy w polu i wyświetlić listę rozwijaną wcześniej wprowadzonego tekstu, a także wybrać jedną z opcji za pomocą kliknięcia myszą. Funkcja zalewkowania naciśnięć klawiszy nie wykryje żadnego z tych typów zmian.

Niestety, nie ma zdarzenia „zmiany”, które natychmiast zgłasza zmiany, przynajmniej o ile wiem. Ale jest rozwiązanie, które działa we wszystkich przypadkach: skonfiguruj zdarzenie czasowe za pomocą metody setInterval ().

Załóżmy, że Twoje pole wejściowe ma identyfikator i nazwę „miasto”:

<input type="text" name="city" id="city" />

Mieć zmienną globalną o nazwie „miasto”:

var city = "";

Dodaj to do inicjalizacji swojej strony:

setInterval(lookForCityChange, 100);

Następnie zdefiniuj funkcję lookForCityChange ():

function lookForCityChange()
{
    var newCity = document.getElementById("city").value;
    if (newCity != city) {
        city = newCity;
        doSomething(city);     // do whatever you need to do
    }
}

W tym przykładzie wartość „city” jest sprawdzana co 100 milisekund, co można dostosować do własnych potrzeb. Jeśli chcesz, użyj funkcji anonimowej zamiast definiowania lookForCityChange (). Należy pamiętać, że kod, a nawet przeglądarka może udostępniać początkową wartość pola wejściowego, więc możesz zostać powiadomiony o „zmianie”, zanim użytkownik cokolwiek zrobi; odpowiednio dostosuj kod.

Jeśli pomysł zdarzenia czasowego, które ma miejsce co dziesiątą część sekundy, wydaje się niezręczny, możesz zainicjować licznik czasu, gdy pole wejściowe otrzyma fokus i zakończyć je (za pomocą clearInterval ()) po rozmyciu. Nie wydaje mi się, aby można było zmienić wartość pola wejściowego bez uzyskania fokusu, więc włączanie i wyłączanie timera w ten sposób powinno być bezpieczne.

HTML5 definiuje oninputzdarzenie, aby złapać wszystkie bezpośrednie zmiany. mi to pasuje.

onchange występuje tylko wtedy, gdy zmiana elementu wejściowego zostanie zatwierdzona przez użytkownika, w większości przypadków jest to sytuacja, gdy element traci fokus.

jeśli chcesz, aby Twoja funkcja uruchamiała się za każdym razem, gdy zmienia się wartość elementu, powinieneś użyć oninputzdarzenia - jest to lepsze niż zdarzenia klawisza w górę / w dół, ponieważ wartość można zmienić za pomocą myszy użytkownika, np. wkleić lub automatycznie wypełnić itp.

Przeczytaj więcej o wydarzeniu zmiany tutaj

Przeczytaj więcej o zdarzeniu wejściowym tutaj

użyj następujących zdarzeń zamiast „onchange”

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

Po pierwsze, co „nie działa”? Nie widzisz ostrzeżenia?

Również Twój kod może zostać uproszczony do tego

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

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

Napotkałem problemy polegające na tym, że Safari nie uruchamiało zdarzeń „onchange” w polu wprowadzania tekstu. Użyłem zdarzenia "change" jQuery 1.7.2 i to też nie działało. Skończyło się na tym, że użyłem zdarzenia textchange ZURBa. Działa z mysimi zdarzeniami i może odpalać bez opuszczania pola:
http://www.zurb.com/playground/jquery-text-change-custom-event

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

Kilka uwag, które IMO są ważne:

• elementy wejściowe nie emitują zdarzenia „zmień”, dopóki nie nastąpi działanie UŻYTKOWNIKA ENTER lub rozmycie czekają, JEST prawidłowe zachowanie .

• Zdarzenie, którego chcesz użyć, to "input"(„ oninput ”). Oto dobrze wykazana różnica między nimi: https://javascript.info/events-change-input

• Te dwa zdarzenia sygnalizują dwa różne gesty / momenty użytkownika (zdarzenie „wejście” oznacza, że ​​użytkownik pisze lub porusza się po opcjach listy wyboru, ale nadal nie potwierdził zmiany. „Zmiana” oznacza, że ​​użytkownik zmienił wartość (wprowadzając lub zamazując nasz)

• Nasłuchiwanie kluczowych wydarzeń, takich jak wiele tutaj zalecanych, jest w tym przypadku złą praktyką. (jak ludzie modyfikujący domyślne zachowanie ENTER na wejściach) ...

• jQuery nie ma z tym nic wspólnego. To wszystko w standardzie HTML.

• Jeśli masz problemy ze zrozumieniem DLACZEGO jest to poprawne zachowanie, być może jest to pomocne, jako eksperyment, użyj edytora tekstu lub przeglądarki bez myszy / podkładki, tylko klawiatury.

Moje dwa centy.

onkeyup działał dla mnie. onkeypress nie uruchamia się po naciśnięciu spacji.

Lepiej jest używać onchange(event)z <select>. Z <input>możesz skorzystać z poniższego wydarzenia:

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

spróbuj onpropertychange. działa tylko dla IE.