1. ホーム
  2. jquery

[解決済み] jQuery キー入力後の入力値取得

2022-05-17 10:31:56

質問

以下のような関数があります。

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