Wykryj zmienione pole tekstowe

289

Przejrzałem wiele innych pytań i znalazłem bardzo proste odpowiedzi, w tym poniższy kod. Chcę po prostu wykryć, gdy ktoś zmieni zawartość pola tekstowego, ale z jakiegoś powodu nie działa ... Nie dostaję błędów konsoli. Kiedy ustawiam punkt przerwania w przeglądarce na change()funkcję, nigdy go nie trafia.

$('#inputDatabaseName').change(function () { 
    alert('test'); 
});
<input id="inputDatabaseName">
Adwokat diabła
źródło
1
tylko kilka rzeczy do wypróbowania: nadaj wejściu typ = "tekst" i uczyń z niego element singletonu. <input id = "inputDatabaseName" type = "text" />
szeliga
Wyczyściłem niepotrzebny kod, tylko o 7 lat za późno.
Devil's Advocate

Odpowiedzi:

523

Możesz użyć inputzdarzenia JavaScript w jQuery w następujący sposób:

$('#inputDatabaseName').on('input',function(e){
    alert('Changed!')
});

W czystym JavaScript:

document.querySelector("input").addEventListener("change",function () {
  alert("Input Changed");
})

Lub tak:

<input id="inputDatabaseName" onchange="youFunction();"
onkeyup="this.onchange();" onpaste="this.onchange();" oninput="this.onchange();"/>
Ouadie
źródło
1
Nie mogę znaleźć dokumentacji dla tego wydarzenia, ale działa dokładnie tak, jak się tego spodziewam. Masz pomysł, gdzie mogę znaleźć stronę z dokumentami?
Jorge Pedret
3
Możesz go znaleźć na liście wydarzeń HTML5: w3schools.com/tags/ref_eventattributes.asp lub tutaj help.dottoro.com/ljhxklln.php
Ouadie
7
To rozwiązanie jest o wiele lepsze niż używanie klucza. Np. IE pozwala użytkownikowi wyczyścić pole wprowadzania, klikając X, który nie wyzwala keyup.
Georg,
7
Najbliższe rozwiązanie do tej pory, ale nadal nie działa, gdy przeglądarka wykonuje automatyczne wypełnianie pól tekstowych.
Saumil
3
To o wiele lepsze niż pierwsza odpowiedź. Ctrl, Shift - wszystkie liczą się jako keyup. A najgorsze jest to, że jeśli wpiszesz szybko, kilka danych wejściowych zarejestruje się jako jedno zdarzenie keyup.
octref
174

spróbuj klucza zamiast zmiany.

<script type="text/javascript">
   $(document).ready(function () {
       $('#inputDatabaseName').keyup(function () { alert('test'); });
   });
</script>

Oto oficjalna dokumentacja jQuery dla .keyup () .

Scott Harwell
źródło
1
westchnienie , przysięgam, próbowałem tego (po obejrzeniu tego pytania: stackoverflow.com/questions/1443292 /...) ... ale najwyraźniej nie dlatego, że teraz działa!
Adwokat diabła
27
zmieniaj pożary tylko wtedy, gdy element traci fokus, a klawisz jest uruchamiany po zwolnieniu klawisza na klawiaturze.
Declan Cook
9
co jeśli użytkownik wklei kod za pomocą ctrl + v lub przeciągając zaznaczony tekst myszką na #inputDatabaseName? Jak to wykrywasz?
Radu Simionescu,
5
Głównym problemem jest to, że nadal nie bierze się pod uwagę, jeśli zawartość faktycznie się zmienia. Tyle tylko, że naciśnięto przycisk
Metropolis
@Metropolis, widziałeś moją odpowiedź? stackoverflow.com/a/23266812/3160597
azerafati
103

W każdej odpowiedzi brakuje niektórych punktów, więc oto moje rozwiązanie:

$("#input").on("input", function(e) {
  var input = $(this);
  var val = input.val();

  if (input.data("lastval") != val) {
    input.data("lastval", val);

    //your change action goes here 
    console.log(val);
  }

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="input">
<p>Try to drag the letters and copy paste</p>

Te Input Eventpożary na klawiaturze wejścia, Mysz Drag , Autofill i kopiuj-wklej testowany na Chrome i Firefox. Sprawdzanie poprzedniej wartości powoduje, że wykrywa ona rzeczywiste zmiany, co oznacza brak strzelania podczas wklejania tej samej rzeczy lub pisania tego samego znaku itp.

Przykład roboczy: http://jsfiddle.net/g6pcp/473/


aktualizacja:

A jeśli chcesz uruchamiać swój komputer change function tylko wtedy, gdy użytkownik skończy pisać i nie uruchomi kilkakrotnie akcji zmiany, możesz spróbować:

var timerid;
$("#input").on("input", function(e) {
  var value = $(this).val();
  if ($(this).data("lastval") != value) {

    $(this).data("lastval", value);
    clearTimeout(timerid);

    timerid = setTimeout(function() {
      //your change action goes here 
      console.log(value);
    }, 500);
  };
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="input">

Jeśli użytkownik zacznie pisać (np. „Foobar”), ten kod uniemożliwia change actionuruchamianie każdego rodzaju liter użytkownika i działa tylko wtedy, gdy użytkownik przestaje pisać, jest to szczególnie przydatne, gdy wysyłasz dane wejściowe do serwera (np. Dane wejściowe wyszukiwania), które serwer sposób robi tylko jeden poszukiwania foobar, a nie sześć wyszukuje fi wtedy foi wtedy foo, a foobi tak dalej.

azerafati
źródło
1
To był pierwszy z około 6 próbowałem. Niesamowite. Dzięki.
Enkode
Prawie działa na IE9: jeśli usuniesz znak, nie wywoła zdarzenia. Jednak bardzo dobre obejście
Soma
@Soma, jak mówią inni, „łamanie IE nie jest wadą, jest cechą”;) chociaż IE nie jest już kontynuowane, ale jeśli masz na to poprawkę, daj nam znać
azerafati
Wiem, ale musiałem to zrobić do pracy :( W rzeczywistości robię: używam $("#input").focusout(function () {}). Gdy klikniesz poza wejściem, zdarzenie jest uruchamiane. Działa na bieżącej wersji Chrome i Firefox oraz IE9
Soma
2
@Soma, jeśli to jedyny sposób działania IE, możesz użyć go po swojemu, zmieniając tylko tę linię$("#input").on("input focusout",function(e){
azerafati,
18

Wprowadzanie tekstu nie uruchamia changezdarzenia, dopóki nie straci ostrości. Kliknij poza wejściem, a pojawi się alert.

Jeśli oddzwanianie powinno zostać uruchomione, zanim wprowadzanie tekstu przestanie być aktywne, użyj .keyup()zdarzenia.

Matt Ball
źródło
changepracuje tutaj: jsfiddle.net/g6pcp ; keyupzaalarmuj po każdym klawiszu, co nie jest dobrym sposobem
diEcho
1
@diEcho Myślę, że alert jest tylko przykładem uruchomienia jego kodu ... a nie tego, co zamierza zrobić w końcu.
Scott Harwell
@diEcho To, co powiedział Scott, służyło wyłącznie do celów testowych. Tak debuguję: D
Adwokat diabła
@ Scott, proszę, proszę użyć właściwego debuggera zamiast alert(). Ułatwi to
Matt Ball
13

onkeyup, onpaste, onchange, oninputwydaje się nie działać, gdy przeglądarka wykonuje automatyczne wypełnianie pól tekstowych. Aby poradzić sobie z takim przypadkiem, autocomplete='off'w polu tekstowym wpisz „ ”, aby uniemożliwić przeglądarce automatyczne wypełnianie pola tekstowego,

Na przykład,

<input id="inputDatabaseName" autocomplete='off' onchange="check();"
 onkeyup="this.onchange();" onpaste="this.onchange();" oninput="this.onchange();" />

<script>
     function check(){
          alert("Input box changed");
          // Things to do when the textbox changes
     }
</script>
Saumil
źródło
3

W moim przypadku miałem pole tekstowe dołączone do narzędzia do wyboru daty. Jedynym rozwiązaniem, które działało dla mnie, było obsłużenie go w zdarzeniu onSelect datepicker.

<input type="text"  id="bookdate">

$("#bookdate").datepicker({            
     onSelect: function (selected) {
         //handle change event here
     }
});
kmxr
źródło
0

Myślę, że możesz keydownteż użyć :

$('#fieldID').on('keydown', function (e) {
  //console.log(e.which);
  if (e.which === 8) {
    //do something when pressing delete
    return true;
  } else {
    //do something else
    return false;
  }
});
Yoosaf Abdulla
źródło
-5

PRACUJĄCY:

$("#ContentPlaceHolder1_txtNombre").keyup(function () {
    var txt = $(this).val();
        $('.column').each(function () {
            $(this).show();
            if ($(this).text().toUpperCase().indexOf(txt.toUpperCase()) == -1) {
                $(this).hide();
            }
        });
    //}
});
Guaroa Mendez
źródło
To wygląda jak kod do innego pytania ... o co chodzi z tymi dużymi wartościami i pokazywaniem / ukrywaniem zawartości?
Nico Haase