JQuery 在按键后获取输入值

我有以下职能:

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

由于某种原因，对于第一次按键，我得到了一个空字符串到控制台日志。

318269 次浏览
小开
最佳答案

这是因为 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");
});
小开

使用 .keyup代替按键。

也可以使用 $(this).val()或者仅仅使用 this.value来访问当前的输入值。

这里是 DEMO

关于 .keypress的信息来自 jQuery 文档,

当浏览器注册时，keypress 事件被发送到一个元素 这类似于按键事件，除了在 键重复的情况。如果用户按下并持有一个键，则按下 事件被触发一次，但是单独的按键事件被触发 另外，修饰符键(如 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);
});
});
小开

意识到这是一个相当老的职位，我将提供一个答案，无论如何，因为我正在与同样的问题进行斗争。

您应该改用 "input"事件，并使用 .on方法注册。这是快速的-没有滞后的 keyup和解决最新的按键问题，你描述的缺失。

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

演示完毕

小开

这是因为在添加新字符之前触发了 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
});
});

这将极大地减少您的代码，因为您不必为每个文本框按 id 应用 keyup 事件。

小开

我认为你需要的是下面的原型

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

我正在寻找一个 ES6的例子(这样它就可以通过我的衬垫) 因此，对于其他正在寻找同样东西的人来说:

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

我还将使用 keyup，因为您将获得填充的当前值。

小开

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>

小开

只需使用超时来进行调用; 超时将在事件堆栈完成时调用(即在调用默认事件之后)

$("body").on('keydown', 'input[type=tel]', function (e) {
setTimeout(() => {
formatPhone(e)
}, 0)
});
小开

请使用此代码输入文本

$('#search').on("input",function (e) {});

如果你使用 .on("change",function (e) {});，那么你需要模糊输入

如果使用 .on("keyup",function (e) {});，那么在最后键入的字符之前得到值


提交答案