Question

我想在文本输入字段中处理更改事件。但是当鼠标失去对元素的关注时会触发事件。我希望触发as-type-in更改事件。我应该怎么做jQuery中的直播活动？

我用过：

jQuery('#element').on('change',function(){
//do the stuff
});

Answer 1

您可以使用keyup()事件：

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

还有一个输入事件：

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

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

Answer 2

您应该使用keyUp()

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

Answer 3

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

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

// a
// ab
// abc

JS Fiddle demo

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

// 
// a
// ab

JS Fiddle demo

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

// 
// a
// ab

JS Fiddle demo

正如输出（粗略地）显示的那样，区别在于keyup和keypress在更新元素的值之前响应;所以，如果你想知道被按下的键，你必须在e.which和{keyCode和keypress中使用keyup（jQuery规范化的按键事件，它返回被按键的value）。 {1}}处理程序然后将其添加到e.which属性。 keyup下keyCode 还会返回正确的value，但不必须手动添加该密钥才能获得更新后的{{1}}。

Answer 4

既然是 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);
    }
}

我想在输入文本元素中进行实时更改事件

4 个答案: