Najlepszy sposób na śledzenie zamiany podczas pisania w typie wprowadzania = „tekst”?

449

Z mojego doświadczenia wynika, że input type="text" onchangezdarzenie zwykle występuje tylko po pozostawieniu blurkontroli ( ).

Czy istnieje sposób, aby zmusić przeglądarkę do uruchamiania przy onchangekażdej textfieldzmianie treści? Jeśli nie, jaki jest najbardziej elegancki sposób śledzenia tego „ręcznie”?

Korzystanie ze onkey*zdarzeń nie jest niezawodne, ponieważ można kliknąć pole prawym przyciskiem myszy i wybrać opcję Wklej, a to zmieni pole bez wprowadzania danych z klawiatury.

Czy setTimeoutto jedyny sposób? .. Brzydki :-)

Ilya Birman
źródło
@ Czy jest jakaś szansa, że ​​możesz zaktualizować zaakceptowaną odpowiedź, aby ta nieaktualna nie była przypięta do góry?
Flimm

Odpowiedzi:

271

Aktualizacja:

Zobacz inną odpowiedź (2015).


Oryginalna odpowiedź z 2009 r .:

Czy chcesz, aby onchangewydarzenie było uruchamiane podczas keydown, rozmycia i wklejania? To magia.

Jeśli chcesz śledzić zmiany podczas ich pisania, użyj "onkeydown". Jeśli chcesz przechwycić operacje wklejania za pomocą myszy, użyj "onpaste"( IE , FF3 ) i "oninput"( FF, Opera, Chrome, Safari 1 ).

1 Złamane <textarea>na Safari. Użyj textInputzamiast tego

Półksiężyc Świeży
źródło
22
onkeypressnależy użyć zamiast onkeydown. onkeydownodpala po kliknięciu klawisza. Jeśli użytkownik przytrzyma klawisz, zdarzenie zostanie uruchomione tylko raz dla pierwszego znaku. onkeypressuruchamia się, gdy do pola tekstowego zostanie dodany znak
fent
61
Rozpalanie onchangewszystkich tych działań nie jest magiczne . <input onchange="doSomething();" onkeypress="this.onchange();" onpaste="this.onchange();" oninput="this.onchange();">poradzi sobie najlepiej dla większości.
aroth
1
Co powiesz na usunięcie tekstu z pola wprowadzania za pomocą myszy? Nie sądzę, żeby to zadziałało.
Jeevan
47
Z jquery 1.8.3 wygląda następująco:$().on('change keydown paste input', function() {})
Narfanator
4
@AriWais: TAK, omg większość SO powinna być przestarzała. Ludzie, ta odpowiedź ma 8 lat . Żałuję, że nie było przycisku „przestarzałe” dla starych odpowiedzi, takich jak ten, a społeczność mogłaby wybrać lepszy.
Półksiężyc Świeży
658

Te dni nasłuchują oninput. Wydaje się, że onchangenie trzeba tracić skupienia na elemencie. To jest HTML5.

Jest obsługiwany przez wszystkich (nawet na urządzeniach mobilnych), z wyjątkiem IE8 i niższych. Do IE dodaj onpropertychange. Używam tego w ten sposób:

const source = document.getElementById('source');
const result = document.getElementById('result');

const inputHandler = function(e) {
  result.innerHTML = e.target.value;
}

source.addEventListener('input', inputHandler);
source.addEventListener('propertychange', inputHandler); // for IE8
// Firefox/Edge18-/IE9+ don’t fire on <select><option>
// source.addEventListener('change', inputHandler); 
<input id="source">
<div id="result"></div>

Robert Siemer
źródło
63
W ciągle zmieniającym się świecie, jakim są standardy internetowe, czasem zaakceptowana odpowiedź może ulec zmianie po kilku latach ... To jest nowa zaakceptowana odpowiedź.
Erick Petrucelli,
1
Wsparcie dla oninputnawet w IE9 jest jednak częściowe ( caniuse.com/#feat=input-event ).
Kenston Choi
Warto zastosować innerTextzamiast tego innerHTML, aby żadne znaczniki nie były renderowane
Jeevan Takhar
47

Poniższy kod działa dobrze dla mnie z Jquery 1.8.3

HTML: <input type="text" id="myId" />

JavaScript / JQuery:

$("#myId").on('change keydown paste input', function(){
      doSomething();
});
Amrit Pal Singh
źródło
11
Biblioteka jQuery nie jest oznaczona w pytaniu.
John Weisz
21
Jquery jest aplikacją JavaScript i przywieziono mnie tutaj za pomocą słowa kluczowego Jquery, nie sądzę, że warto tworzyć nowe pytanie dla każdego pytania javascript dla odpowiedzi Jquery ...
GaelDev
12
Gdyby ludzie nie mogli sugerować użycia bibliotek w odpowiedziach, byłoby O wiele więcej pytań bez odpowiedzi na temat SO
dietbacon
3
Wystrzeliwuje wiele razy. Prawdopodobnie z powodu zmiany i skrótu klawiszowego. Prawdopodobne dane są potrzebne tylko tutaj.
mmm
1
nie potrzebujesz, keydownponieważ spowoduje to zduplikowanie wartości danych wejściowych, usuń ją.
Youssef Al Subaihi
43

JavaScript jest tutaj nieprzewidywalny i zabawny.

  • onchange występuje tylko po rozmyciu pola tekstowego
  • onkeyupi onkeypressnie zawsze występuje przy zmianie tekstu
  • onkeydown występuje po zmianie tekstu (ale nie można śledzić wycinania i wklejania za pomocą kliknięcia myszy)
  • onpastei oncutwystępuje po naciśnięciu klawisza, a nawet kliknięciu prawym przyciskiem myszy.

Tak więc, aby śledzić zmiany w polu tekstowym, musimy onkeydown, oncuti onpaste. W przypadku wywołania zwrotnego tego zdarzenia, jeśli zaznaczysz wartość pola tekstowego, nie otrzymasz zaktualizowanej wartości, ponieważ wartość jest zmieniana po wywołaniu zwrotnym. Rozwiązaniem tego problemu jest ustawienie funkcji limitu czasu z limitem 50 miliardów sekund (lub mniejszym) w celu śledzenia zmiany.

To brudny hack, ale to jedyny sposób, jak badałem.

Oto przykład. http://jsfiddle.net/2BfGC/12/

Sanket Sahu
źródło
4
oninputi textInputsą to zdarzenia, które są faktycznym rozwiązaniem tego problemu, ale nie jest obsługiwane przez wszystkie przeglądarki.
Sanket Sahu
Jeśli chodzi o drugi punkt, zakładam, że miałeś na myśli onkeyupi onkeydownktóre są podobne. Oba mogą przechwytywać klawisze Ctrl, Alt, Shift i Meta. Jeśli chodzi o trzeci punkt, zakładam, że miałeś na myśli onkeypress.
Daniel Stevens
12

onkeyupdzieje się po tym, jak piszesz, na przykład naciskam, tkiedy podnoszę palec, dzieje się, ale keydownakcja następuje przed cyfrowaniem znakut

Mam nadzieję, że jest to pomocne dla kogoś.

onkeyupLepiej więc, gdy chcesz wysłać to, co właśnie napisałeś.

Fernando André
źródło
8

Miałem podobne wymaganie (pole tekstowe w stylu Twittera). Używane onkeyupi onchange. onchangefaktycznie zajmuje się operacjami wklejania myszy podczas utraty ostrości z pola.

[Aktualizacja] W HTML5 lub nowszym użyj, oninputaby uzyskać aktualizacje modyfikacji znaków w czasie rzeczywistym, jak wyjaśniono w innych odpowiedziach powyżej.

Mohnish
źródło
Oninput jest użyteczny, jeśli chcesz wykryć, kiedy zmieniła się zawartość pola tekstowego, wejście: tekst, wejście: hasło lub wejście: element wyszukiwania, ponieważ zdarzenie onchange na tych elementach jest uruchamiane, gdy element traci fokus, nie natychmiast po modyfikacji .
hkasera
@hkasera Tak, z HTML5 oninputto droga. Ale kiedy zaimplementowałem, HTML5 nie istniał i mieliśmy IE 8 :(. Doceniam twoją aktualizację, ponieważ zawiera aktualne informacje dla użytkowników.
Mohnish
7

Jeśli używasz TYLKO Internet Explorera, możesz użyć tego:

<input type="text" id="myID" onpropertychange="TextChange(this)" />

<script type="text/javascript">
    function TextChange(tBox) {
        if(event.propertyName=='value') {
            //your code here
        }
    }
</script>

Mam nadzieję, że to pomaga.

RolandDeschain
źródło
8
To może być projekt wewnętrzny, tak myślę ... :)
eselk
94
Dzięki Bogu, że nie mieszkam w tym domu! : D
Marco Matarazzi,
13
10 lat temu w tym zdaniu nie byłoby nic śmiesznego .. :(
Michał Tabor
4
dla mnie to pomaga, opracowuję projekt dla niektórych urządzeń mobilnych z wbudowanym systemem operacyjnym, w którym IE jest jedyną przeglądarką.
Anders M.
3
Jeśli używasz TYLKO Internet Explorera - LOL. Zrobiłem mój dzień w 2016 roku!
Jack Black
4

istnieje dość bliskie rozwiązanie (nie naprawiaj wszystkich sposobów wklejania), ale większość z nich:

Działa dla danych wejściowych, a także dla obszarów tekstowych:

<input type="text" ... >
<textarea ... >...</textarea>

Rób jak to:

<input type="text" ... onkeyup="JavaScript: ControlChanges()" onmouseup="JavaScript: ControlChanges()" >
<textarea ... onkeyup="JavaScript: ControlChanges()" onmouseup="JavaScript: ControlChanges()" >...</textarea>

Jak powiedziałem, nie wszystkie sposoby wklejania odpalają zdarzenie we wszystkich przeglądarkach ... najgorsze, że niektóre nie uruchamiają żadnego zdarzenia, ale Timery są straszne do takiego użycia.

Ale większość sposobów wklejania odbywa się za pomocą klawiatury i / lub myszy, więc zwykle klawisz onkeyup lub onmouseup są uruchamiane po wklejeniu, również klawisz onkeyup jest uruchamiany podczas pisania na klawiaturze.

Upewnij się, że kod kontrolny nie zajmuje dużo czasu ... w przeciwnym razie użytkownik uzyska słabe wrażenie.

Tak, sztuczka polega na strzelaniu do klawisza i myszy ... ale uwaga, oba można odpalić, więc weź pod uwagę takie !!!

z666zz666z
źródło
4

Oceń następne podejście za pomocą JQuery:

HTML:

<input type="text" id="inputId" />

JavaScript (JQuery):

$("#inputId").keyup(function(){
        $("#inputId").blur();
        $("#inputId").focus();
});

$("#inputId").change(function(){
        //do whatever you need to do on actual change of the value of the input field
});
Alex Uke
źródło
Używam tego samego sposobu
:)
Zdaję sobie sprawę, że nie jest to najnowsza odpowiedź, ale czy nie rozmazanie i ponowne skupienie danych wejściowych na każdym kluczu nie sprzyjałoby umiejscowieniu kursora, gdyby było to gdziekolwiek poza końcem danych wejściowych?
Michael Martin-Smucker
@ MichaelMartin-Smucker Tak byś pomyślał, ale najwyraźniej nie: jsfiddle.net/gsss8c6L
Clonkex
4

„wejście” działało dla mnie.

var searchBar  = document.getElementById("searchBar");
searchBar.addEventListener("input", PredictSearch, false);
Sam
źródło
3

Można użyć keydown, keyupi keypresswydarzeń, jak również.

Gumbo
źródło
3

Aby śledzić każdy, wypróbuj ten przykład, a wcześniej całkowicie zmniejsz częstotliwość migania kursora do zera.

<body>
//try onkeydown,onkeyup,onkeypress
<input type="text" onkeypress="myFunction(this.value)">
<span> </span>
<script>
function myFunction(val) {
//alert(val);
var mySpan = document.getElementsByTagName("span")[0].innerHTML;
mySpan += val+"<br>";
document.getElementsByTagName("span")[0].innerHTML = mySpan;
}
</script>

</body>

onblur: zdarzenie generuje przy wyjściu

onchange: zdarzenie generuje przy wyjściu, jeśli zostaną wprowadzone jakiekolwiek zmiany w tekście wejściowym

onkeydown: zdarzenie generuje się po każdym naciśnięciu klawisza (również dla długiego przytrzymania klawisza)

onkeyup: zdarzenie generowane jest przy każdym wydaniu klucza

onkeypress: to samo co onkeydown (lub onkeyup), ale nie reaguje na ctrl, backsace, alt other

Venkat
źródło
1

2018 tutaj, oto co robię:

$(inputs).on('change keydown paste input propertychange click keyup blur',handler);

Byłbym wdzięczny za wskazanie wad tego podejścia.

a20
źródło
2
2019 tutaj, a to uruchomi się wielokrotnie dla każdego naciśnięcia klawisza. Na przykład zobacz tutaj: jsfiddle.net/sp00n82/3r4691tq/5
sp00n
1

Metoda 1: Dodaj detektor zdarzeń dla input:

element.addEventListener("input", myFunction);

 

Metoda 2: Zdefiniuj oninputwłaściwość za pomocą JavaScript:

element.oninput = function()
{
    myFunction();
};

 

Metoda 3: Zdefiniuj oninputwłaściwość za pomocą HTML:

<input type="text" oninput="myFunction();">
Pikamander2
źródło