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

DEMO тут

Інформація про .keypressдокументи jQuery,

Подія натискання клавіші надсилається елементу, коли браузер реєструє введення з клавіатури. Це схоже на подію клавіші, за винятком випадків повторень клавіш. Якщо користувач натискає і утримує клавішу, подія клавіші запускається один раз, але окремі події натискання клавіші запускаються для кожного вставленого символу. Крім того, клавіші-модифікатори (наприклад, 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");
    });
});

Я хочу до цього додати, якщо у вас багато текстових полів і вам потрібно зробити те ж саме під час події їх клавіатури, ви можете просто дати їм загальний клас css (наприклад, commoncss) і застосувати подію клавіатури, як це.

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

це значно зменшить код, оскільки вам не доведеться застосовувати подію клавіатури за id для кожного текстового поля.

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

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

Я також використовував би клавіш, оскільки ви отримуєте поточне значення, яке заповнюється.

Просто використовуйте тайм-аут, щоб здійснити свій дзвінок; час очікування буде викликано, коли стек подій закінчений (тобто після виклику події за замовчуванням)

$("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-press/

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>