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

Javascript event to know when a user changes something on a form

本文关键字：表单 事件 用于 了解 何时更 用户 Javascript      更新时间：2023-09-26

我有一个表格，它有：

  • 两个输入文本字段
  • 4 选择
  • 1 个文本区域

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

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

还是我必须以旧的方式进行，例如：为选择执行更改功能，为输入执行焦点等？

基本上，我希望能够知道表单上何时发生了变化。

有什么想法吗？

这是一个更新：

假设我使用以下代码： 

$('input, textarea, select').on('change', function() {
    console.log('hey');
    // how do I unbind this certain even after the first "hey" listing of the console?
});

即使在控制台首次列出之后，我如何解绑此确定？

要查找input元素何时更改，我们可以简单地执行以下操作：

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

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

  • 两个输入文本字段
  • 4 选择
  • 1 个文本区域

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

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

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

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

此代码可能如下所示：

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

您的编辑表明您希望能够在某个时候禁用处理程序。

有两种方法可以做到这一点。第一个简单而粗糙：

$('form').off('change');

form 上将不再捕获change事件。但是，如果要重新启用它，则必须完成重新绑定事件处理程序的整个严格操作。另一种选择是有一个变量来告诉您是否应启用事件处理程序：

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 来禁用处理程序，并通过将其设置为再次true来重新启用它。

您可以使用：

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

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

这对

你有用吗？

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

使用 

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

为#myform中"类似输入"的所有内容添加更改。

补充：至于解绑，请使用：

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

真正的简单

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

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

这应该是相当普遍的，并且与代表团一起表现。

是：

//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
});
相关文章：