Как получить текст входного текстового поля во время onKeyPress?


я пытаюсь получить текст в текстовом поле, когда пользователь вводит текст в нем ( jsfiddle playground):

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

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

</html>

​ Код выполняется без ошибок, за исключением того, что стоимостью на input text box, во время onKeyPress всегда значение до изменения:

вопрос: как получить текст текстового поля во время onKeyPress?

Бонус Треп

есть три события, связанные с "пользователь вводит" в HTML DOM:

  • onKeyDown
  • onKeyPress
  • onKeyUp

In Windows, приказом WM_Key сообщения становятся важными, когда пользователь удерживает клавишу, и ключ начинает повторять:

  • WM_KEYDOWN('a') - пользователь нажал вниз A ключ
  • WM_CHAR('a') - an a символ был получен от пользователя
  • WM_CHAR('a') - an a символ был получен от пользователя
  • WM_CHAR('a') - an a символ был получен от пользователя
  • WM_CHAR('a') - an a символ был получен от пользователя
  • WM_CHAR('a') - an a символ был получен от пользователя
  • WM_KEYUP('a') - пользователь отпустил A ключ

приведет к появлению пяти символов в текстовом элементе управления:aaaaa

важно то, что вы отвечаете на WM_CHAR сообщение, которое повторяется. В противном случае вы пропустите события при нажатии клавиши.

In HTML все немного по-другому:

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

HTML-код обеспечивает KeyDown и KeyPress каждая клавиша повторяется. А то KeyUp событие возникает только тогда, когда пользователь отпускает ключ.

вынос

  • я можете ответить onKeyDown или onKeyPress, но оба по-прежнему подняты перед input.value обновлено
  • я не могу отвечать на onKeyUp, потому что это не происходит при изменении текста в текстовом поле.

вопрос: как я могу получить текст текстового поля во время onKeyPress?

бонус Чтение

10 67

10 ответов:

сохранить его простым. Используйте оба onKeyPress() и onKeyUp():

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

Это заботится о получении наиболее обновленное строковое значение (после ключа вверх), а также обновления, если пользователь удерживает клавишу.

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

значение входного текстового поля, во время onKeyPress всегда значение перед изменением

это специально: это позволяет прослушивателю событий отменить нажатие клавиши.

если прослушиватели событий отменяет событие значение не обновляется. Если событие не отменено, значение обновляется, но после того, как прослушиватель событий был вызван.

чтобы получить значение после обновления значения поля, запланируйте выполнение функции в следующем цикле событий. Обычный способ сделать это-позвонить setTimeout с таймаутом 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);
});

Попробуйте здесь:http://jsfiddle.net/Q57gY/2/

Edit: некоторые браузеры (например, Chrome) не вызывают события нажатия клавиш для backspace; изменено нажатие клавиши на keyup в коде.

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

сохранить компактность.
Каждый раз, когда вы нажимаете клавишу, функция edValueKeyPress() называется.
Вы также объявили и инициализировали некоторые переменные в этой функции, которые замедляют процесс и требуют больше процессора и памяти.
Вы можете просто использовать этот код, полученный из простой подстановки.

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

}

это все, что вы хотите, его быстрее!

обычно я связываю значение поля (т. е. до его обновления) с ключом, связанным с ключевым событием. Следующие использует последние JS, так что потребуется настройка для поддержки в старых IE.

недавний пример 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);

поддержка старых примеров IEs

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

[EDIT-этот подход, по умолчанию, отключает нажатие клавиш для таких вещей, как back space, CTRL+A. приведенный выше код подходит для первого, но для этого потребуется дополнительная обработка для последнего и нескольких других случайностей. См. комментарий Яна Бойда ниже.]

легко...

в обработчике событий нажатия клавиш напишите

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
}

таким образом, есть преимущества и недостатки для каждого события. События onkeypress и onkeydown не извлекайте последнее значение, и onkeypress не срабатывает для непечатаемых символов в некоторых браузерах. Элемент onkeyup событие не обнаруживает, когда ключ удерживается для нескольких символов.

это немного hacky, но делать что-то вроде

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)" />

кажется, чтобы справиться с лучшим из всех миров.

С помощью событие.ключ мы можем получить значения до ввода в текстовое поле ввода HTML. Вот этот код.

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

ни один из ответов до сих пор не предлагает полного решения. Есть несколько вопросов:

  1. не все нажатия клавиш передаются на keydown и keypress обработчики (например, клавиши backspace и delete подавляются некоторыми браузерами).
  2. обращение keydown не очень хорошая идея. Бывают ситуации, когда нажатие клавиши не приводит к нажатию клавиши!
  3. setTimeout() решения стиля задерживаются под Google Chrome / Blink веб-браузерами до тех пор, пока пользователь перестает печатать.
  4. мышь и сенсорная события могут использоваться для выполнения таких действий, как вырезание, копирование и вставка. Эти события не будут вызывать события клавиатуры.
  5. браузер, в зависимости от метода ввода, может не выдавать уведомление об изменении элемента до тех пор, пока пользователь не удалится от поля.

более правильное решение будет обрабатывать keypress,keyup,input и change события.

пример:

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

Скрипка:

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

обработка всех четырех событий захватывает все крайние случаи. При работе с вводом от пользователя следует учитывать все типы методов ввода и проверять функциональность кроссбраузерных и кросс-устройств. Приведенный выше код был протестирован в Firefox, Edge и Chrome на рабочем столе, а также на мобильных устройствах, которыми я владею.

попробуйте связать код события со значением, которое вы получаете. вот пример моего кода.

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

значение ab получите последнее значение в поле ввода.