Question

我的表格有：

两个输入文本字段
4选择
1 textarea

有没有简单的方法来捕获以下事件？

当用户在输入字段内输入内容，或从列表中选择某些内容，或在文本区域内键入内容时？

或者我必须采用旧时尚的方式：选择更改功能，输入焦点等等？

基本上，我希望能够知道表格上有什么变化。

有什么想法吗？

以下是更新：

让我说我使用以下代码：

$('input, textarea, select').on('change', function() {
    console.log('hey');

    // how do I unbind this certain even after the first "hey" listing of the console?

});

即使首次列出控制台后，如何取消绑定？

Answer 1

您可以使用：

$('input, textarea, select').on('change', function() {
     alert('something\'s changed!');
});

其中'input'是您的每个输入元素（或您想要跟踪的类名共享的类名）

Answer 2

要查找input元素的更改时间，我们只需执行以下操作：

$('input').change(function(){
    console.log('Something has changed');
});

这将捕获页面上所有input元素的所有事件，但在您的情况下，我们有以下内容：

两个输入文本字段
4选择
1 textarea

input选择器与所有这些都不匹配。但是，不要惊慌！我们仍然可以这样做。聪明的是，在DOM中，所有祖先元素都会被告知其祖先发生的事件。例如，点击span内的div会通知两个元素点击已经发生。

所以在这种情况下，我们只需要找到一个包含所有这些元素的共同祖先元素，并在其上捕获事件。显而易见的是form：

$('form').change(function(){
    console.log('Something has changed');
});

然而这可能不是我们能做的最好的事情。例如，有一种快速方法可以访问已更改的元素。如果我们能确保没有其他元素可以触发该功能，那也是很好的。 jQuery使on函数可以实现这一点。这允许我们将处理程序附加到form元素并确保原始元素与选择器匹配，然后从函数内部向我们提供对该元素的引用{/ 1}}。

此代码可能如下所示：

this

您的编辑建议您希望能够在某个时刻禁用处理程序。

有两种方法可以做到这一点。第一个是简单粗暴的：

$('form').on('change', 'input, select, textarea', function() {
    console.log('Something has changed in an element called ' + this.name;
});

$('form').off('change');不会再捕获change个事件。但是，如果要重新启用它，则必须完成重新绑定事件处理程序的整个过程。另一个选项是有一个变量，告诉你是否应该启用事件处理程序：

form

然后，您可以通过将var enabled = true; $('form').on('change', 'input, select, textarea', function() { if (enabled) { console.log('Something has changed in an element called ' + this.name; } });设置为enabled来停用处理程序，并通过再次将其设置为false来重新启用它。

Answer 3

使用

$("#myform *:input").change(function(){
    // do stuff here!
});

将更改添加到#myform中的所有“类似输入”。

已添加：至于解除绑定，请使用：

$('#myform *:input').on('change', function() {
    console.log('hey');

    $('#myform *:input').off('change', arguments.callee);

});

真正的轻松

Answer 4

这对你有用吗？

$(":input").change(function(){ ... });

Answer 5

分配焦点数据，检查模糊数据：

$('#FormName').on({
    focus:function(){
        $(this).data('curval',$(this).val());
    },
    blur:function(){
        if($(this).val() !== $(this).data('curval')){
            alert('changed!');
        }
    }
},'input,select,textarea');

这应该是非常普遍的，并且与代表团一致。

Answer 6

是：

//For a dropdown list/select
$( "#select" ).change(function() {
    dostuff
});

//For a textbox AS the user enters keystrokes (as opposed to on end of focus)
$( "#text" ).on('input', function() {
    dostuff
});

Javascript事件，用于了解用户何时更改表单上的内容

6 个答案: