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

Ответ 1

Обработка события input является непротиворечивым решением: оно поддерживается для textarea и элементов input во всех современных браузерах и запускается именно тогда, когда вам это нужно:

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>

Ответ 2

Держите его простым. Используйте как onKeyPress(), так и onKeyUp():

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

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

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

Ответ 3

значение входного текстового поля во время 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; изменено нажатие клавиши на клавиатуре в коде.

Ответ 4

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

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

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

Ответ 5

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

Ответ 6

Ни один из ответов пока не предлагает полного решения. Существует немало проблем для решения:

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

Более правильное решение будет обрабатывать события 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 на рабочем столе, а также на мобильных устройствах, которые у меня есть.

Ответ 7

Я обычно объединяю значение поля (то есть перед его обновлением) с ключом, связанным с ключевым событием. Следующие использует недавние 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);

Поддержка более старого примера 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);
}

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

Ответ 8

просто...

В обработчике событий keyPress напишите

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
}

Ответ 9

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

Это немного взломано, но что-то вроде

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

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

Ответ 10

Используя event.key, мы можем получить значения перед входом в текстовое поле ввода 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()" />

Ответ 11

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

<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 получит последнее значение в поле ввода.