次の機能があります。
$(document).ready(function() {
$("#dSuggest").keypress(function() {
var dInput = $('input:text[name=dSuggest]').val();
console.log(dInput);
$(".dDimension:contains('" + dInput + "')").css("display","block");
});
});何らかの理由で、最初のキーを押したときに、コンソールログに空の文字列が表示されます。
回答:
これは、新しい文字が要素のに追加される前にkeypressイベントが発生するためです（したがって、最初のイベントは、最初の文字が追加される前に発生しますが、はまだ空です）。代わりに使用する必要があります。これは、キャラクターが追加された後に発生します。valuekeypressvaluekeyup
要素#dSuggestが同じである場合、input:text[name=dSuggest]このコードを大幅に簡略化できます（そうでない場合id、別の要素と同じ名前の要素を持つことはお勧めできません）。
$('#dSuggest').keypress(function() {
var dInput = this.value;
console.log(dInput);
$(".dDimension:contains('" + dInput + "')").css("display","block");
});inputイベントタイプの実際のサポートを示唆するドキュメントには何も表示されません。
これはかなり古い投稿であることに気づき、同じ問題に苦労していたのでとにかく答えを提供します。
"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ドキュメントからの情報、
ブラウザがキーボード入力を登録すると、keypressイベントが要素に送信されます。これは、キーが繰り返される場合を除いて、keydownイベントに似ています。ユーザーがキーを押し続けると、keydownイベントが1回トリガーされますが、挿入された文字ごとに個別のkeypressイベントがトリガーされます。さらに、修飾キー（Shiftなど）はkeydownイベントをトリガーしますが、keypressイベントはトリガーしません。
keyupが遅すぎて、キーを離さずに押したままにすることができます。keydown値を実際に変更するため、少しタイムアウトを指定して使用する方が良いでしょう。
入力を更新するには、実行スレッドを中断する必要があります。
$(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);
});
});keyup遅延は目的によっては遅すぎ、修飾キーの自動フィルタリングも行いません。これは実際には私にとってはうまくいきます。
これは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でキーアップイベントを適用する必要がないため、これによりコードが大幅に削減されます。
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>