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

У меня есть такая функция:

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

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

Это связано с тем, что 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");
});

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

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

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

Демо здесь

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

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

ДЕМО здесь

Информация о .keypressjQuery docs,

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

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

  $(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);
       });
  });

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

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

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

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

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

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

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

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

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>