我想要输入文本元素中的实时更改事件

I want a live change event in input text element

本文关键字：实时 事件 输入 文本 元素 我想要      更新时间：2023-09-26

我想处理文本输入字段中的更改事件。 但是，当鼠标失去对元素的焦点时，将触发该事件。我想触发键入更改事件。我应该为jQuery中的实时事件做什么？

我用过：

jQuery('#element').on('change',function(){
//do the stuff
});
您可以使用

keyup()事件：

$('#someInput').keyup(function() {
    // Your code here
});

还有一个输入事件：

$('#someInput').on('input', function() { 
    // Your code here
});

正如FRNHR指出的那样，最好使用input事件，因为："输入将处理任何更改 - 例如，如果您在字段中粘贴某些内容，输入将触发，但Keyup不会。

您有三个与键相关的事件可供选择，keyup，keydown和keypress;假设您键入字符串abc：

$('#demo').on('keyup', function(e){
    console.log(this.value);
});
// a
// ab
// abc

JS小提琴演示。

$('#demo').on('keydown', function(e){
    console.log(this.value);
});
// 
// a
// ab

JS小提琴演示。

$('#demo').on('keypress', function(e){
    console.log(this.value);
});
// 
// a
// ab

JS小提琴演示。

不同之处在于，正如输出（大致）所示，keyup和keypress在元素值更新之前响应;因此，如果您想知道按下的键，则必须在keypress和keyup处理程序中使用e.which（返回按下键keyCode的jQuery规范化按键事件），然后将其添加到value属性中。 e.which 将在 keyup 下也返回正确的keyCode ，但您不必手动添加该密钥即可获取更新的value。

你应该使用keyUp() 

$( "#target" ).keyup(function() {
  alert( "Handler for .keyup() called." );
});

由于现在是 2021 年，这也可以通过"输入"来完成。但是你可能需要看看 Vue.js如果做到这一点要容易得多。

jQuery(document).on('input', '#element', function (e) {
    var input = $(this).val();
    var target = $('.target');
    var fallbackName = target.attr('data-fallback-text'); // Can be handy
    liveInputChange(input, target, fallbackName);
});
function liveInputChange(input, target, fallbackName) {
    if (input === "" || input === null) {
        target.text(fallbackName);
    } else {
        target.text(input);
    }
}
相关文章：