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

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 :-)

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 ¹ ).

¹ _{Złamane <textarea>na Safari. Użyj textInputzamiast tego}

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>

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

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/

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ś.

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.

Myślę, że w 2018 roku lepiej skorzystać z inputwydarzenia.

-

Jak opisuje specyfikacja WHATWG ( https://html.spec.whatwg.org/multipage/indices.html#event-input-input ):

Wystrzeliwany przy elementach sterujących, gdy użytkownik zmienia wartość (patrz także zdarzenie zmiany )

-

Oto przykład, jak go używać:

<input type="text" oninput="handleValueChange()">

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.

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 !!!

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

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

var searchBar  = document.getElementById("searchBar");
searchBar.addEventListener("input", PredictSearch, false);

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

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

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.

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();">

Robert Siemer addEventListener nie jest obsługiwany w IE8.

„Starsze wersje IE obsługiwały równoważną, zastrzeżoną metodę EventTarget.attachEvent ().” https://developer.mozilla.org/it/docs/Web/API/Element/addEventListener