blocks|key|469727|text|意识到这是一个相当古老的帖子，我将不管怎样提供一个答案，因为我正在努力解决同样的问题。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|469728|您应该改用"input"事件，并使用.on方法进行注册。这是快速的-没有keyup的延迟，并解决了您所描述的缺少最新按键的问题。|offset|length|style|CODE|469729|$('#dSuggest').on("input",+function()+{
++++var+dInput+=+this.value;
++++console.log(dInput);
++++$(".dDimension:contains('"+%2B+dInput+%2B+"')").css("display","block");
});|code-block|syntax|javascript|469730|Demo+here|469731|entityMap|0|LINK|mutability|MUTABLE|url|http://jsbin.com/oleto5/507/edit^0|0|5|7|I|3|10|5|0|0|0|9|0|0^^$0|@$1|2|3|4|5|6|7|W|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|X|8|@$D|Y|E|Z|F|G]|$D|10|E|11|F|G]|$D|12|E|13|F|G]]|9|@]|A|$]]|$1|H|3|I|5|J|7|14|8|@]|9|@]|A|$K|L]]|$1|M|3|N|5|6|7|15|8|@]|9|@$D|16|E|17|1|18]]|A|$]]|$1|O|3|-4|5|6|7|19|8|@]|9|@]|A|$]]]|P|$Q|$5|R|S|T|A|$U|V]]]]

Realizing that this is a rather old post, I'll provide an answer anyway as I was struggling with the same problem.

You should use the <code>"input"</code> event instead, and register with the <code>.on</code> method. This is fast - without the lag of <code>keyup</code> and solves the missing latest keypress problem you describe.

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

<a href="http://jsbin.com/oleto5/507/edit">Demo here</a>

blocks|key|685691|text|您必须中断执行线程以允许输入更新。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|685692|++$(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('"+%2B+dInput+%2B+"')").css("display","block");
+++++++++++++++},+0);
+++++++});
++});|code-block|syntax|javascript|685693|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

You have to interrupt the execution thread to allow the input to update.

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

blocks|key|469960|text|我正在寻找一个ES6示例(这样它就可以通过我的linter)，所以对于其他正在寻找相同示例的人来说：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|469961|$('#dSuggest').keyup((e)+=>+{
++++console.log(e.currentTarget.value);
});|code-block|syntax|javascript|469962|我也会使用keyup，因为你会得到填充的当前值。|469963|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

I was looking for a ES6 example (so it could pass my linter)
So for other people who are looking for the same:

<pre><code>$('#dSuggest').keyup((e) =&gt; {
 console.log(e.currentTarget.value);
});
</code></pre>

I would also use keyup because you get the current value that is filled in.

blocks|key|469846|text|这是因为在添加新字符之前会触发Keypress事件。使用'keyup‘事件代替，这将在您的情况下完美地工作。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|469847|$(document).ready(function()+{
++++$("#dSuggest").keyup(function()+{
++++++++var+dInput+=+$('input:text[name=dSuggest]').val();
++++++++console.log(dInput);
++++++++$(".dDimension:contains('"+%2B+dInput+%2B+"')").css("display","block");
++++});
});|code-block|syntax|javascript|469848|我想补充的是，如果你有很多文本框，并且你必须在他们的keyup事件上做同样的事情，你可以简单地给他们一个通用的css类(例如commoncss)，并像这样应用keyup事件。|469849|$(document).ready(function()+{
++++$(".commoncss").keyup(function()+{
++++++++//your+code
++++});
});|469850|这将极大地减少您的代码，因为您不必为每个文本框按id应用keyup事件。|469851|entityMap^0|F|8|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@$9|T|A|U|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|V|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|W|8|@]|D|@]|E|$]]|$1|M|3|N|5|H|7|X|8|@]|D|@]|E|$I|J]]|$1|O|3|P|5|6|7|Y|8|@]|D|@]|E|$]]|$1|Q|3|-4|5|6|7|Z|8|@]|D|@]|E|$]]]|R|$]]

This is because <code>Keypress</code> event is fired before the new character is added. Use 'keyup' event instead,which will work perfectly in your situation.

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

I want to add to this, if you have many textboxes and you have to do the same thing on their keyup event you can simply give them a common css class(eg commoncss) and apply keyup event like this.

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

this will greatly reduce you code as you don't have to apply keyup event by id for each textboxes.

blocks|key|685940|text|我想你需要的是下面的原型|type|unstyled|depth|inlineStyleRanges|entityRanges|data|685941|$(element).on('input',function(){code})|code-block|syntax|javascript|685942|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

I think what you need is the below prototype 

<pre><code>$(element).on('input',function(){code})
</code></pre>

blocks|key|686057|text|jQuery按键后获取输入值|type|unstyled|depth|inlineStyleRanges|entityRanges|data|686058|https://www.tutsmake.com/jquery-keypress-event-detect-enter-key-pressed/|offset|length|686059|​|686060|i+=+0;++
$(document).ready(function(){++
++++$("input").keypress(function(){++
++++++++$("span").text+(i+%2B=+1);++
++++});++
});+|code-block|syntax|javascript|686061|<!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">++
Keypresses+val+count:+0++
</body>++
</html>++|686062|686063|entityMap|0|LINK|mutability|MUTABLE|url^0|0|0|20|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|W|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|X|8|@]|9|@$D|Y|E|Z|1|10]]|A|$]]|$1|F|3|G|5|6|7|11|8|@]|9|@]|A|$]]|$1|H|3|I|5|J|7|12|8|@]|9|@]|A|$K|L]]|$1|M|3|N|5|J|7|13|8|@]|9|@]|A|$K|L]]|$1|O|3|G|5|6|7|14|8|@]|9|@]|A|$]]|$1|P|3|-4|5|6|7|15|8|@]|9|@]|A|$]]]|Q|$R|$5|S|T|U|A|$V|C]]]]

jQuery get input value after keypress

<a href="https://www.tutsmake.com/jquery-keypress-event-detect-enter-key-pressed/" rel="nofollow noreferrer">https://www.tutsmake.com/jquery-keypress-event-detect-enter-key-pressed/</a>

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>i = 0; 
$(document).ready(function(){ 
 $("input").keypress(function(){ 
 $("span").text (i += 1); 
 }); 
}); </code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt; 
&lt;html&gt; 
&lt;head&gt; 
&lt;title&gt;jQuery keyup() Method By Tutsmake Example&lt;/title&gt; 
&lt;script src="https://code.jquery.com/jquery-3.3.1.min.js"&gt;&lt;/script&gt;
&lt;/head&gt; 
&lt;body&gt; 
Enter something: &lt;input type="text"&gt; 
&lt;p&gt;Keypresses val count: &lt;span&gt;0&lt;/span&gt;&lt;/p&gt; 
&lt;/body&gt; 
&lt;/html&gt; </code></pre>
</div>
</div>

blocks|key|470036|text|只需使用超时进行调用；超时将在事件堆栈完成时调用(即在调用默认事件之后)|type|unstyled|depth|inlineStyleRanges|entityRanges|data|470037|$("body").on('keydown',+'input[type=tel]',+function+(e)+{
++++setTimeout(()+=>+{
++++++++formatPhone(e)
++++},+0)
});|code-block|syntax|javascript|470038|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

Just use a timeout to make your call; the timeout will be called when the event stack is finished (i.e. after the default event is called)

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

blocks|key|686166|text|请使用此代码输入文本|type|unstyled|depth|inlineStyleRanges|entityRanges|data|686167|$('#search').on("input",function+(e)+{});|code-block|syntax|javascript|686168|如果使用.on("change",function+(e)+{});，则需要模糊输入|offset|length|style|CODE|686169|如果使用.on("keyup",function+(e)+{});，则会在键入的最后一个字符之前获得值|686170|entityMap^0|0|0|4|U|0|4|T|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|R|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|S|8|@$I|T|J|U|K|L]]|9|@]|A|$]]|$1|M|3|N|5|6|7|V|8|@$I|W|J|X|K|L]]|9|@]|A|$]]|$1|O|3|-4|5|6|7|Y|8|@]|9|@]|A|$]]]|P|$]]

please use this code for input text
<pre><code>$('#search').on(&quot;input&quot;,function (e) {});
</code></pre>
if you use <code>.on(&quot;change&quot;,function (e) {});</code> then you need to blur input
if you use <code>.on(&quot;keyup&quot;,function (e) {});</code> then you get value before the last character you typed

I have the following function:

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

For some reason, for the first keypress, I'm getting an empty string to the console log.

jQuery get input value after keypress

jQuery

我有以下功能：$(document).ready(function() {    $("#dSuggest").keypress(function() {        var dInput = $('input:text[name=dSuggest]').val();        console.log(dInput);        $(".dDimension:contains('" + 

问jQuery按键后获取输入值
EN

回答 8

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问jQuery按键后获取输入值EN

回答 8

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问jQuery按键后获取输入值
EN