<input type="text">的值可以通过多种方式改变,包括:

按键 复制/粘贴 JavaScript修改 由浏览器或工具栏自动完成

我希望在JavaScript函数发生变化时调用它(使用当前输入值)。我希望它能马上被调用,而不是在输入失去焦点的时候。

我正在寻找最干净和最健壮的方法来跨所有浏览器(最好使用jQuery)。


当前回答

把这段代码添加到某个地方,就可以了。

var originalVal = $.fn.val;
$.fn.val = function(){
    var result =originalVal.apply(this,arguments);
    if(arguments.length>0)
        $(this).change(); // OR with custom event $(this).trigger('value-changed');
    return result;
};

发现这个解决方案在val()不触发change()在jQuery

其他回答

虽然这个问题是10年前发布的,但我认为它仍然需要改进。这就是我的解。

$(document).on('propertychange change click keyup input paste', 'selector', function (e) {
    // Do something here
});

这个解决方案的唯一问题是,它不会触发从javascript的值改变,如$('selector')。瓦尔(“价值”)。当你从javascript中改变值时,你可以触发任何事件到你的选择器。

$(selector).val('some value');
// fire event
$(selector).trigger('change');

或者排成一行

$(selector).val('some value').trigger('change');

好吧,最好的办法就是把你自己列出的三个基础都做一遍。一个简单的:onblur,:onkeyup等不会为你想要的工作,所以只是把它们结合起来。

KeyUp应该涵盖前两个,如果Javascript正在修改输入框,我当然希望它是你自己的Javascript,所以只需在修改它的函数中添加一个回调。

你就不能用<span contenteditable="true" spellcheck="false">元素来代替<input type="text">吗?

<span>(以contenteditable="true" spellcheck="false"作为属性)与<input>区别很大,主要是因为:

它的样式不是<input>。 它没有value属性,但文本被呈现为innerText,并成为其内部主体的一部分。 它是multiline,而<input>不是,尽管你设置了属性multiline="true"。

要完成外观,当然,你可以用CSS样式,而将值写成innerText,你可以为它获得一个事件:

这是小提琴。

不幸的是,有一些东西在IE和Edge中实际上不起作用,我无法找到。

不幸的是,没有事件或事件集符合您的标准。按键和复制/粘贴都可以用keyup事件处理。通过JS进行更改比较棘手。如果你可以控制设置文本框的代码,你最好的选择是修改它,直接调用你的函数,或者在文本框上触发一个用户事件:

// Compare the textbox's current and last value.  Report a change to the console.
function watchTextbox() {
  var txtInput = $('#txtInput');
  var lastValue = txtInput.data('lastValue');
  var currentValue = txtInput.val();
  if (lastValue != currentValue) {
    console.log('Value changed from ' + lastValue + ' to ' + currentValue);
    txtInput.data('lastValue', currentValue);
  }
}

// Record the initial value of the textbox.
$('#txtInput').data('lastValue', $('#txtInput').val());

// Bind to the keypress and user-defined set event.
$('#txtInput').bind('keypress set', null, watchTextbox);

// Example of JS code triggering the user event
$('#btnSetText').click(function (ev) {
  $('#txtInput').val('abc def').trigger('set');
});

如果你不能控制这段代码,你可以使用setInterval()来“监视”文本框的变化:

// Check the textbox every 100 milliseconds.  This seems to be pretty responsive.
setInterval(watchTextbox, 100);

这种主动监控不会“立即”捕捉到更新,但它似乎足够快,没有可察觉的滞后。正如DrLouie在评论中指出的,如果你需要观察大量的输入,这个解决方案可能无法很好地扩展。您总是可以将第二个参数调整为setInterval()以更频繁或更少地检查。

下面是一个不使用jQuery的解决方案(它真的很过时,现在没有必要了)

使用事件“input”,你可以查找任何类型的变化:

删除,后退,粘贴,输入,任何会改变输入值的东西。

输入事件与文本输入直接相关。当文本以任何方式被更改时,输入就会被分派。

document.querySelector(“# testInput”)。addEventListener(“输入”,测试); 功能测试(e) { var a = document.getElementById('output'); a.innerText += "检测到更新!\n"; } <输入id = " testInput " > < br > <一个id = "输出" > < / >