JQuery получает входное значение после нажатия клавиши

У меня есть следующая функция:

$(document).ready(function() {
    $("#dSuggest").keypress(function() {
        var dInput = $('input:text[name=dSuggest]').val();
        console.log(dInput);
        $(".dDimension:contains('" + dInput + "')").css("display","block");
    });
});

По какой-то причине для первого нажатия клавиши я получаю пустую строку в журнал консоли.

Ответ 1

Это связано с тем, что события keypress запускаются до добавления нового символа в элемент value элемента (поэтому первое событие keypress запускается до того, как будет добавлен первый символ, а value все еще пусто). Вместо этого следует использовать keyup, который запускается после добавления символа.

Обратите внимание: если ваш элемент #dSuggest совпадает с input:text[name=dSuggest], вы можете значительно упростить этот код (а если нет, то иметь элемент с именем, который совпадает с id другого элемент не является хорошей идеей).

$('#dSuggest').keypress(function() {
    var dInput = this.value;
    console.log(dInput);
    $(".dDimension:contains('" + dInput + "')").css("display","block");
});

Ответ 2

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

Вместо этого вы должны использовать событие "input" и зарегистрироваться с помощью метода .on. Это быстро - без задержки keyup и решает отсутствующую самую последнюю проблему с нажатием клавиши.

$('#dSuggest').on("input", function() {
    var dInput = this.value;
    console.log(dInput);
    $(".dDimension:contains('" + dInput + "')").css("display","block");
});

Демо здесь

Ответ 3

Используйте .keyup вместо нажатия клавиши.

Также используйте $(this).val() или просто this.value для доступа к текущему значению ввода.

DEMO здесь

Информация о .keypress из jQuery docs,

Событие нажатия клавиши отправляется элементу, когда регистры браузера ввод клавиатуры. Это похоже на событие keydown, за исключением случай повторений ключей. Если пользователь нажимает и удерживает клавишу, событие запускается один раз, но запускаются отдельные события нажатия клавиш для каждого вставленного символа. Кроме того, ключи-модификаторы (например, Shift) запускает события смены ключа, но не вызывает нажатия клавиш.

Ответ 4

Вы должны прервать поток выполнения, чтобы обновить вход.

  $(document).ready(function(event) {
       $("#dSuggest").keypress(function() {
           //Interrupt the execution thread to allow input to update
               setTimeout(function() {
                   var dInput = $('input:text[name=dSuggest]').val();
                   console.log(dInput);
                   $(".dDimension:contains('" + dInput + "')").css("display","block");
               }, 0);
       });
  });

Ответ 5

Это связано с тем, что событие Keypress запускается до добавления нового символа. Вместо этого используйте событие "keyup", которое отлично работает в вашей ситуации.

$(document).ready(function() {
    $("#dSuggest").keyup(function() {
        var dInput = $('input:text[name=dSuggest]').val();
        console.log(dInput);
        $(".dDimension:contains('" + dInput + "')").css("display","block");
    });
});

Я хочу добавить к этому, если у вас много текстовых полей, и вы должны сделать то же самое в своем событии keyup, вы можете просто дать им общий класс css (например, commoncss) и применить событие keyup, подобное этому.

$(document).ready(function() {
    $(".commoncss").keyup(function() {
        //your code
    });
});

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

Ответ 6

Я искал пример ES6 (чтобы он мог передать мой linter) Так для других людей, которые ищут то же самое:

$('#dSuggest').keyup((e) => {
    console.log(e.currentTarget.value);
});

Я бы также использовал keyup, потому что вы получили текущее значение, которое было заполнено.

Ответ 7

Я думаю, что вам нужен прототип ниже

$(element).on('input',function(){code})

Ответ 8

JQuery получить входное значение после нажатия клавиши

https://www.tutsmake.com/jquery-keypress-event-detect-enter-key-pressed/

i = 0;  
$(document).ready(function(){  
    $("input").keypress(function(){  
        $("span").text (i += 1);  
    });  
});

<!DOCTYPE html>  
<html>  
<head>  
<title>jQuery keyup() Method By Tutsmake Example</title> 
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
</head>  
<body>  
Enter something: <input type="text">  
<p>Keypresses val count: <span>0</span></p>  
</body>  
</html>

Ответ 9

Просто используйте тайм-аут, чтобы позвонить; тайм-аут будет вызван, когда стек событий будет завершен (т.е. после вызова события по умолчанию)

$("body").on('keydown', 'input[type=tel]', function (e) {
    setTimeout(() => {
        formatPhone(e)
    }, 0)
});