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

Question

我想处理文本输入字段中的更改事件。但是当鼠标失去对元素的关注时会触发该事件。我希望触发输入更改事件。我应该为 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事件，因为：“输入将处理任何更改 - 例如，如果您在字段中粘贴某些内容，输入将触发但 keyup 不会。”

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 小提琴演示。

$('#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响应；因此，如果您想知道被按下的键，则必须在和处理程序中使用（返回被按下键的 jQuery 标准化按键事件），然后将其添加到属性中。将在下也返回正确的，但您不必手动添加该密钥来获取更新的.e.whichkeyCodekeypresskeyupvaluee.whichkeyup keyCodevalue

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