Najlepszy sposób na śledzenie onchange podczas wpisywania w input type = "text"?

These days listen for oninput. It feels like onchange bez konieczności utraty skupienia na elemencie. Jest to HTML5.

Jest obsługiwany przez wszystkich (nawet mobilnych), z wyjątkiem IE8 i poniżej. Dla IE dodaj onpropertychange. Używam go tak:

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 mi dobrze 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 wtedy, gdy rozmyjesz pole tekstowe
• onkeyup & onkeypress nie zawsze występuje przy zmianie tekstu
• onkeydown występuje przy zmianie tekstu (ale nie można śledzić wycinania i wklejania za pomocą kliknięcia myszką)
• onpaste & oncut występuje z naciśnięciem klawisza, a nawet kliknięciem prawym przyciskiem myszy.

Więc, aby śledzić zmiany w textboxie, musimy onkeydown, oncut i onpaste. W wywołaniu zwrotnym tego zdarzenia, Jeśli zaznaczysz wartość pole tekstowe nie otrzymasz zaktualizowanej wartości, ponieważ wartość jest zmieniana po wywołaniu zwrotnym. Tak więc rozwiązaniem jest ustawienie funkcji timeout z timeoutem 50 mili-sekund (lub może być krótszy), aby śledzić zmianę.

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

onkeyup dzieje się po wpisaniu na przykład i nacisnąć t gdy unoszę palec akcja dzieje się, ale na keydown akcja dzieje się, zanim cyfra znak t

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

Więc onkeyup jest lepsze, gdy chcesz wysłać to, co właśnie wpisałeś.

Myślę, że w 2018 roku lepiej będzie wykorzystać wydarzenie input.

-

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

Wywołane w kontrolkach, gdy użytkownik zmienia wartość (Zobacz też zmiana zdarzenia )

-

Oto przykład jak z niego korzystać:

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

Miałem podobny wymóg(pole tekstowe w stylu Twittera). Używane onkeyup i onchange. onchange zajmuje się operacjami wklejania myszy podczas utraty ostrości z pola.

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

Jeśli używasz tylko Internet Explorer, 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>

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

Działa zarówno dla wejść, jak i dla tekstów:

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

Zrób tak:

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

Jak już mówiłem, nie wszystkie sposoby wklejania zdarzenia fire na wszystkich przeglądarkach... najgorsze niektórzy nie odpalają żadnego zdarzenia w ogóle, ale zegary są straszne, aby być używane do takich.

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

Upewnij się, że Twój kod kontrolny nie zajmuje dużo czasu... w przeciwnym razie użytkownik dostaje słabe impresion.

Proszę, oceń następne podejście używając 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" zadziałało.

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

Możesz użyć keydown, keyup i keypress wydarzenia, jak również.

Aby śledzić każdy spróbuj tego przykładu, a wcześniej całkowicie zmniejszyć szybkość mrugania 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 zmiany w inputtext

Onkeydown: Zdarzenie generuje przy każdym naciśnięciu klawisza (również dla długiego trzymania klawisza)

Onkeyup: Zdarzenie generuje przy każdym wydaniu klucza

Onkeypress: taki sam jak onkeydown (lub onkeyup), ale nie reaguje na ctrl, backsace, alt inne

2018 tutaj, to jest to, co robię:

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

Metoda 1: Dodaj detektor zdarzeń dla input:

element.addEventListener("input", myFunction);

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

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

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

<input type="text" oninput="myFunction();">

Użyj oninput zamiast onchange.

Indeks.html

<html>
  <head>
    <title>title here</title>
    <script src="index.js"></script>
  </head>
  <body>
    <input oninput="onclickhandler(this)"></input>
  </body>
</html>

Skrypt.js

function onclickhandler(e) {
  console.log(e.value);
}

Robert Siemer addEventListener nie jest obsługiwany w IE8 .

" starsze wersje IE wspierały równoważny, zastrzeżony EventTarget.metoda attachEvent ()." https://developer.mozilla.org/it/docs/Web/API/Element/addEventListener