Tekst jest wyświetlany z opóźnieniem

Question

chcę tekst wprowadzić w polu tekstowym natychmiast zostać pokazany w div:

function func() { 
 
    document.getElementById("query").innerHTML = document.getElementById("keyword").value; 
 
} 
 
window.onload = function() { 
 
    keyword.onkeydown = function(e) { 
 
    func(); 
 
    } 
 
}

<input type="text" id="keyword" size="40"> 
 
<div id="query"></div>

to działa, jedynym problemem jest to, że jest wyświetlany opóźnienie.

Więc jeśli wpisuję "abc", pokazuje tylko "ab". Muszę wprowadzić inną postać, na przykład "abcd", tak aby pokazywała "abc".
Brakuje zawsze ostatniego znaku.

Tutaj można wypróbować: http://jsfiddle.net/285cz0np/

Answer 1

Wydarzenie jest zwolniony onkeydown. Ponieważ wartość elementu wejściowego jeszcze się nie zmieniła, nie widać wyników.

Można to zmienić na onkeyup, zamiast tego: (updated example). Lub możesz ustawić opóźnienie przed wywołaniem funkcji.

---

Alternatywnie, można także słuchać input event:

Example Here

document.getElementById("keyword").addEventListener('input', function (e) { 
    document.getElementById("query").textContent = e.target.value; 
}); 

Answer 2

Problem jest, ponieważ wartość wprowadzania tekstu, nie zmieni do momentu zwolnienia klawisza. za pomocą setTimeout pozwalasz przeglądarkę, aby zaktualizować wartość, przed uruchamiając funkcję (func)

polecam nie zmieniać onkeyup, ponieważ posiadał chcesz onkeydown, to rozwiązanie będzie nadal działać za pomocą zdarzenia

onkeydown

keyword.onkeydown = function (e) { 
     setTimeout(func,0) 
    } 

Aktualizacja Przykład jsFiddle: http://jsfiddle.net/285cz0np/1/

polecam zmienić na input imprezy. Na przykład, jeśli użytkownik wklei ze schowka (używając tylko myszy), twoje wydarzenie się nie uruchomi.

Answer 3

Dzieje się tak dlatego, że zdarzenie wywołujące tę funkcję to onkeydown, więc po naciśnięciu klawisza funkcja odczytuje wartość pola tekstowego. W tym momencie odczytuje dane, naciśnięty klawisz nie został jeszcze dodany do rzeczywistej wartości.

Łatwą poprawką jest zmiana zdarzenia na onkeyup, ponieważ przed upływem czasu klucz jest dodawany do wartości.

window.onload = function() { 
    keyword.onkeyup = function (e) { 
     func(); 
    } 
}