Jak uzyskać tekst z pola tekstowego podczas onKeyPress?

Próbuję uzyskać tekst w polu tekstowym, gdy użytkownik w nim wpisuje ( jsfiddle zabaw ):

function edValueKeyPress() {
    var edValue = document.getElementById("edValue");
    var s = edValue.value;

    var lblValue = document.getElementById("lblValue");
    lblValue.innerText = "The text box contains: " + s;

    //var s = $("#edValue").val();
    //$("#lblValue").text(s);    
}

<input id="edValue" type="text" onKeyPress="edValueKeyPress()"><br>
<span id="lblValue">The text box contains: </span>

Kod działa bez błędów, z wyjątkiem, że wartości w input textpolu, w czasie onKeyPressjest zawsze wartość przed zmianą:

Pytanie : Jak uzyskać tekst pola tekstowego w trakcie onKeyPress?

Bonus Chatter

Istnieją trzy zdarzenia związane ze słowem „użytkownik pisze” w HTML DOM:

• onKeyDown
• onKeyPress
• onKeyUp

W systemie Windows kolejność WM_Keykomunikatów staje się ważna, gdy użytkownik przytrzymuje klawisz, a klucz zaczyna się powtarzać:

• WM_KEYDOWN('a')- użytkownik nacisnął Aklawisz
• WM_CHAR('a')- apostać została odebrana od użytkownika
• WM_CHAR('a')- apostać została odebrana od użytkownika
• WM_CHAR('a')- apostać została odebrana od użytkownika
• WM_CHAR('a')- apostać została odebrana od użytkownika
• WM_CHAR('a')- apostać została odebrana od użytkownika
• WM_KEYUP('a')- użytkownik zwolnił Aklucz

Spowoduje, że w kontrolce tekstowej pojawi się pięć znaków: aaaaa

Ważne jest to, że odpowiadasz na WM_CHARwiadomość, tę, która się powtarza. W przeciwnym razie przegapisz wydarzenia po naciśnięciu klawisza.

W HTML sprawy wyglądają nieco inaczej:

• onKeyDown
• onKeyPress
• onKeyDown
• onKeyPress
• onKeyDown
• onKeyPress
• onKeyDown
• onKeyPress
• onKeyDown
• onKeyPress
• onKeyUp

Html dostarcza KeyDowni KeyPresskażdy klucz powtórki. A KeyUpzdarzenie jest wywoływane tylko wtedy, gdy użytkownik zwolni klawisz.

Na wynos

• I może reagować na onKeyDownlub onKeyPress, ale oba są jeszcze podniesiona, zanim input.valuezostał zaktualizowany
• Nie mogę odpowiedzieć onKeyUp, ponieważ nie dzieje się tak, gdy zmienia się tekst w polu tekstowym.

Pytanie: Jak uzyskać tekst pola tekstowego w trakcie onKeyPress?

Czytanie bonusowe

• Pobieranie wartości formularza za pomocą jQuery
• Uzyskaj wartość w wejściowym polu tekstowym

Obchodzenie się z inputzdarzenie jest spójne rozwiązanie: jest on wspierany przez textareai inputelementy we wszystkich współczesnych przeglądarkach i pożary dokładnie , kiedy trzeba go:

function edValueKeyPress() {
    var edValue = document.getElementById("edValue");
    var s = edValue.value;

    var lblValue = document.getElementById("lblValue");
    lblValue.innerText = "The text box contains: " + s;
}

<input id="edValue" type="text" onInput="edValueKeyPress()"><br>
<span id="lblValue">The text box contains: </span>

Jednak przepisałbym to trochę:

function showCurrentValue(event)
{
    const value = event.target.value;
    document.getElementById("lblValue").innerText = value;
}

<input id="edValue" type="text" onInput="showCurrentValue(event)"><br>
The text box contains: <span id="lblValue"></span>

Nie komplikuj. Użyj obu onKeyPress()i onKeyUp():

<input id="edValue" type="text" onKeyPress="edValueKeyPress()" onKeyUp="edValueKeyPress()">

Dba o to, aby uzyskać najbardziej zaktualizowaną wartość ciągu (po podniesieniu klucza), a także aktualizuje, jeśli użytkownik przytrzyma klucz.

jsfiddle: http://jsfiddle.net/VDd6C/8/

wartość pola tekstowego wejściowego, podczas onKeyPress jest zawsze wartością przed zmianą

Jest to celowe: umożliwia detektorowi zdarzeń anulowanie naciśnięcia klawisza.

Jeśli detektory zdarzeń anulują zdarzenie , wartość nie jest aktualizowana. Jeśli zdarzenie nie zostanie anulowane, wartość jest aktualizowana, ale po wywołaniu detektora zdarzenia .

Aby uzyskać wartość po zaktualizowaniu wartości pola, zaplanuj uruchomienie funkcji w następnej pętli zdarzeń. Zwykle można to zrobić, dzwoniąc setTimeoutz limitem czasu wynoszącym 0:

$('#field').keyup(function() {
    var $field = $(this);

    // this is the value before the keypress
    var beforeVal = $field.val();

    setTimeout(function() {

        // this is the value after the keypress
        var afterVal = $field.val();
    }, 0);
});

Spróbuj tutaj: http://jsfiddle.net/Q57gY/2/

Edycja : Niektóre przeglądarki (np. Chrome) nie wyzwalają zdarzeń naciśnięcia klawisza dla Backspace; zmieniono naciśnięcie klawisza na wprowadzenie kodu.

Keep it Compact.
Za każdym naciśnięciem klawisza edValueKeyPress()wywoływana jest funkcja .
Zadeklarowałeś również i zainicjowałeś niektóre zmienne w tej funkcji - co spowalnia proces i wymaga więcej procesora i pamięci.
Możesz po prostu użyć tego kodu - pochodzącego z prostego podstawienia.

function edValueKeyPress()
{
    document.getElementById("lblValue").innerText =""+document.getElementById("edValue").value;
}

To wszystko, czego chcesz, i to szybciej!

<asp:TextBox ID="txtMobile" runat="server" CssClass="form-control" style="width:92%;  margin:0px 5px 0px 5px;" onkeypress="javascript:return isNumberKey(event);" MaxLength="12"></asp:TextBox>

<script>
    function isNumberKey(evt) {
        var charCode = (evt.which) ? evt.which : event.keyCode;
        if (charCode > 31 && (charCode < 48 || charCode > 57)) {
            return false;
        }
        return true;
    }
</script>

Żadna z dotychczasowych odpowiedzi nie oferuje pełnego rozwiązania. Jest kilka problemów do rozwiązania:

1. Nie wszystkie naciśnięcia klawiszy są przekazywane do keydowni keypressprocedury obsługi (np. Klawisze cofania i usuwania są blokowane przez niektóre przeglądarki).
2. Obsługa keydownnie jest dobrym pomysłem. Są sytuacje, w których upadek klawisza NIE powoduje naciśnięcia klawisza!
3. setTimeout() rozwiązania stylistyczne są opóźniane w przeglądarkach internetowych Google Chrome / Blink do momentu, gdy użytkownik przestanie pisać.
4. Zdarzenia myszy i dotyku mogą służyć do wykonywania czynności, takich jak wycinanie, kopiowanie i wklejanie. Te zdarzenia nie wywołają zdarzeń klawiatury.
5. Przeglądarka, w zależności od metody wprowadzania, może nie dostarczyć powiadomienia o zmianie elementu, dopóki użytkownik nie opuści pola.

Bardziej poprawne rozwiązanie będzie obsługiwać keypress, keyup, inputoraz changewydarzenia.

Przykład:

<p><input id="editvalue" type="text"></p>
<p>The text box contains: <span id="labelvalue"></span></p>

<script>
function UpdateDisplay()
{
    var inputelem = document.getElementById("editvalue");
    var s = inputelem.value;

    var labelelem = document.getElementById("labelvalue");
    labelelem.innerText = s;
}

// Initial update.
UpdateDisplay();

// Register event handlers.
var inputelem = document.getElementById("editvalue");
inputelem.addEventListener('keypress', UpdateDisplay);
inputelem.addEventListener('keyup', UpdateDisplay);
inputelem.addEventListener('input', UpdateDisplay);
inputelem.addEventListener('change', UpdateDisplay);
</script>

Skrzypce:

http://jsfiddle.net/VDd6C/2175/

Obsługa wszystkich czterech zdarzeń obejmuje wszystkie przypadki skrajne. Podczas pracy z danymi wejściowymi od użytkownika należy wziąć pod uwagę wszystkie typy metod wprowadzania i zweryfikować funkcjonalność między przeglądarkami i urządzeniami. Powyższy kod został przetestowany w Firefoksie, Edge i Chrome na komputerach stacjonarnych, a także na posiadanych przeze mnie urządzeniach mobilnych.

Zwykle łączę wartość pola (tj. Przed jego aktualizacją) z kluczem skojarzonym ze zdarzeniem klucza. Poniższy kod używa najnowszego JS, więc będzie wymagał dostosowania do obsługi starszych przeglądarek IE.

Najnowszy przykład JS

document.querySelector('#test').addEventListener('keypress', function(evt) {
    var real_val = this.value + String.fromCharCode(evt.which);
    if (evt.which == 8) real_val = real_val.substr(0, real_val.length - 2);
    alert(real_val);
}, false);

Wsparcie dla starszych przykładów IE

//get field
var field = document.getElementById('test');

//bind, somehow
if (window.addEventListener)
    field.addEventListener('keypress', keypress_cb, false);
else
    field.attachEvent('onkeypress', keypress_cb);

//callback
function keypress_cb(evt) {
    evt = evt || window.event;
    var code = evt.which || evt.keyCode,
        real_val = this.value + String.fromCharCode(code);
    if (code == 8) real_val = real_val.substr(0, real_val.length - 2);
}

[EDYCJA - to podejście domyślnie wyłącza naciskanie klawiszy dla rzeczy takich jak spacja, CTRL + A. Powyższy kod uwzględnia ten pierwszy, ale wymagałby dalszego majstrowania, aby umożliwić drugie, i kilka innych ewentualności. Zobacz komentarz Iana Boyda poniżej.]

łatwy...

W programie obsługi zdarzeń keyPress napisz

void ValidateKeyPressHandler(object sender, KeyPressEventArgs e)
{
    var tb = sender as TextBox;
    var startPos = tb.SelectionStart;
    var selLen= tb.SelectionLength;

    var afterEditValue = tb.Text.Remove(startPos, selLen)
                .Insert(startPos, e.KeyChar.ToString()); 
    //  ... more here
}

Każda impreza ma więc wady i zalety. Zdarzenia onkeypressi onkeydownnie pobierają najnowszej wartości i onkeypressnie są uruchamiane w przypadku znaków niedrukowalnych w niektórych przeglądarkach. onkeyupWydarzenie nie wykrywa, gdy klawisz jest wciśnięty do wielu znaków.

To trochę dziwne, ale robię coś takiego

function edValueKeyDown(input) {
    var s = input.value;

    var lblValue = document.getElementById("lblValue");
    lblValue.innerText = "The text box contains: "+s;

    //var s = $("#edValue").val();
    //$("#lblValue").text(s);    
}

<input id="edValue" type="text" onkeydown="setTimeout(edValueKeyDown, 0, this)" />

wydaje się obsługiwać to, co najlepsze ze wszystkich światów.

Używając event.key możemy uzyskać wartości przed wejściem do pola tekstowego HTML Input. Oto kod.

function checkText()
{
  console.log("Value Entered which was prevented was - " + event.key);
  
  //Following will prevent displaying value on textbox
  //You need to use your validation functions here and return value true or false.
  return false;
}

<input type="text" placeholder="Enter Value" onkeypress="return checkText()" />

Spróbuj połączyć zdarzenie charCode z otrzymaną wartością. Oto próbka mojego kodu:

<input type="text" name="price" onkeypress="return (cnum(event,this))" maxlength="10">
<p id="demo"></p>

js:

function cnum(event, str) {
    var a = event.charCode;
    var ab = str.value + String.fromCharCode(a);
    document.getElementById('demo').innerHTML = ab;
}

Wartość w abotrzyma ostatnią wartość w polu wejściowym.

Jest na to lepszy sposób. Użyj metody concat. Przykład

zadeklaruj zmienną globalną. działa to dobrze na angular 10, po prostu prześlij to do Vanilla JavaScript. Przykład:

HTML

<input id="edValue" type="text" onKeyPress="edValueKeyPress($event)"><br>
<span id="lblValue">The text box contains: </span>

KOD

emptyString = ''

edValueKeyPress ($event){
   this.emptyString = this.emptyString.concat($event.key);
   console.log(this.emptyString);
}