jQuery在按键后获取输入值

129

我有以下功能：

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

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

jquery jquery-events

— 或温伯格
source

156

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

— 寂寞的一天
source

2

可以，但是使用jquery 2.x时，这已经过时了，因为下面使用on和input的答案是最好的方法。

— Piotr Kula 2014年

1

@ppumkin：仅仅因为jQuery 2已经发布，并不意味着人们不需要支持IE8和更低版本。而且我在文档中没有看到任何建议为input事件类型提供实际支持的内容。

— cookie怪物

7

您纠正了，他们应该停止支持IE。jQuery 1.x中的大多数“变通办法”都是针对IE的，因此实际上应该将其重命名为jQuerIE。

— Piotr Kula 2014年

187

意识到这是一篇比较老的文章，无论如何，我都会提供一个答案，因为我正努力解决同样的问题。

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

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

在这里演示

— 弗雷德里克·戈特利布（Frederik Gottlieb）
source

26

这应该标记为正确的答案-键入键可能解决了丢失字符的问题，但在确定字符是否实际写入时就存在问题（例如，该键不是“ tab”或“ home”）。为您+1

— 纳西

问题是旧浏览器不支持它，并且IE9不响应已删除的字符。

— PhoneixS

33

使用.keyup代替按键。

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

在这里演示

有关.keypressjQuery文档的信息，

当浏览器注册键盘输入时，会将keypress事件发送到一个元素。这与keydown事件类似，但重复按键的情况除外。如果用户按住某个键，则一次按下事件会触发一次，但是会为每个插入的字符触发单独的按键事件。此外，修饰键（例如Shift）可触发按键事件，但不会触发按键事件。

— Selvakumar Arumugam
source

5

keyup速度太慢，并且可以在不释放键的情况下按住它并且必须进行操作。最好在keydown稍微超时的情况下使用，以便实际更改该值。

— vsync

我发现的唯一缺点是，如果用户同时按下多个键盘字符，它将无法正确注册。

— vsync

5

您必须中断执行线程以允许输入更新。

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

— 议会
source

1

keyup延迟对于某些用途而言太慢，并且也不会自动过滤修饰键。这实际上对我来说更好。

— 艾伯特·博里

最佳答案。keyup-速度慢，无法通过按两个键捕获类似@的字符。

— 罗姆·拉什

4

这是因为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事件。

— 瑜伽主持
source

3

我正在寻找一个ES6示例（这样它就可以通过我的lint）所以对于其他正在寻找相同示例的人来说：

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

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

— 马文·VK
source

1

只需使用超时即可拨打电话；事件堆栈完成后（即调用默认事件后）将调用超时

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

— mon
source

0

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

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

— 扎克伯格
source

0

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>

展开摘要

— 开发者
source