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

Question

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

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

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

Answer 1

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

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

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

Демо здесь

Answer 2

Это происходит потому, что 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");
});

Answer 3

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

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

DEMO здесь

Информацияо .keypress из документов jQuery,

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

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

Answer 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 по id для каждого текстового поля.

Answer 6

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

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

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

Answer 7

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>  

Answer 8

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

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