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

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

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

​ Код работает без ошибок, за исключением того, что стоимостью на

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/

редактировать: некоторые браузеры (например, 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 не срабатывает для непечатаемых символов в некоторых браузерах. The 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 получите последнее значение в поле ввода.