jQuery监听所有文本输入更改

Question

jQuery监听所有文本输入更改

javascriptjqueryhtmlformsevents

10

我有一个表单内的输入元素，我想当它的值改变时提取它的值。请查看这个 Fiddle：http://jsfiddle.net/spryno724/WaBzW/1/。

通过使用 change 事件，我能够在输入失去焦点时显示文本输入框中的值。然而，当表单重置或 JavaScript 清除文本输入框的值时，该值并不会更新。

是否有特定的事件可以监听，以在对文本输入控件进行任何更改时触发？

我想避免解决方案，比如监听表单重置或清除按钮按下的事件。这是我应用程序所做的简化示例，如果我尝试做所有这些操作，它将变得非常复杂。

谢谢您花费时间。

- Oliver Spryn

1

我今天也在解决这个问题。jQuery的.on事件应该可以处理这个问题，但是我无法让它工作。$("#ElementID").on("input change propertychange paste keyup", handler)... - CD Smith

哦，我以前从没用过 .on()。我会研究一下的。 - Oliver Spryn

我以前使用过.live()，但自1.7版本起已被弃用，现在推荐使用.on()方法。 - CD Smith

@AlfalfaStrange，请查看我在.live()事件上对Johnny的评论。 - Oliver Spryn

@thecodeparadox 感谢你将重要的注释加粗显示。 - Oliver Spryn

1

可能是JS事件：挂钩文本输入的值更改事件的重复问题。 - Oliver Spryn

4个回答

2

这个问题与另一个问题完全相同。请将获得最多赞的答案视为我的问题的答案： JS Events: hooking on value change event on text inputs

- Oliver Spryn

你应该（投票）将问题标记为重复，而不是发布回答。 - user247702

1

覆盖 jQuery 的 val 方法

HTML

<input id='myInput' name='myInputField' value='v1'>

JS

var myInput = $('#myInput');

//this will not trigger the change event
myInput.val('v2');

//override val method
var oldVal = myInput.val;
myInput.val = function(value){
   var returnVal = oldVal.call(this,value);
   myInput.change();
   return returnVal;
}

// this will trigger the change event
// myInput.val is overridden
myInput.val('v3');

注意：仅当从myInput变量调用val方法时才起作用。

- Raaghu

-1

尝试

$('#input').live('change',function() {         })

- Johnny Mnemonic

.live() 是每当页面动态添加新元素并且必须附加事件时使用的：http://api.jquery.com/live/。 - Oliver Spryn

6

不要使用.live()，它已经在1.7版本中被弃用了。 - CD Smith

我知道你说的关于它被弃用的事情是真的。奇怪的是，我遇到了这样一种情况：当输入值改变时，我想改变输入框的背景颜色，使用.live('change'...可以工作，而使用.on('change'...则不行 - 我使用的是jquery 1.7.3。你有什么想法为什么会这样吗？ - Johnny Mnemonic

是的，我也遇到了同样的问题，我觉得我只是 jQuery 方面不太行。 - CD Smith

2

@JohnnyMnemonic 你需要将选择器上下文传递给 on，否则它将只像使用 .change() 一样工作。.on( events [, selector] [, data], handler(eventObject) ) - Andreas Wong

@JohnnyMnemonic 请更新您的答案以反映API的更改。目前情况下，它并不能解决OP的问题，而且很可能只会促进不良实践。 - Benjamin Gruenbaum

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- thecodeparadox · Accepted Answer

$(document).ready(function() {
    $('input.clear').click(function() {
        $('input.input').val('');
        $('p.display').text('The value of the text input is: ');
    });

    $('input.input').on('keyup change', function() {
       $('p.display').text('The value of the text input is: ' + $(this).val());
    });
})

示例 1

也许这个解决方案可以帮到你：

$(document).ready(function() {
    $('input.clear, input[type=reset]').on('click', function() {
        $('input.input').val('').change();
        $('p.display').text('The value of the text input is: ');
    });

    $('input.input').on('keyup change', function() {
        $('p.display').text('The value of the text input is: ' + $(this).val());
    });
});

演示2