通过javascript跟踪表单中的更改的最佳方法是什么？

我想通过javascript跟踪表单中输入的变化.我的意图是(但不限于)

只有在某些内容发生变化时才启用"保存"按钮

如果用户想要关闭页面并且未保存某些内容则发出警报

想法？

1> nickf..：

---

循环遍历所有输入元素,并onchange在每个元素上放置一个处理程序.当它触发时,设置一个标志,让您知道表单已更改.它的基本版本很容易设置,但是如果有人将输入从"a"更改为"b"然后再返回"a",则不足以识别.如果抓住那个案件很重要,那么它仍然是可能的,但需要更多的工作.

这是jQuery中的一个基本示例:

$("#myForm")
    .on("input", function() {
        // do whatever you need to do when something's changed.
        // perhaps set up an onExit function on the window
        $('#saveButton').show();
    })
;

---

您可以在循环中使用闭包来存储输入字段的值,然后您可以测试输入是否更改回值.你必须为单选按钮,复选框和提交按钮做一些特殊情况.哦,不要忘记在这种情况下删除unbink!

---

@nickf这是表单中最后一个字段的问题.用户将填写该字段,并想知道为什么提交按钮仍然看起来已禁用:(不明显他们必须单击某处 - 或 - 选项卡才能继续,直到他们实际点击 - 某处 - 或 - 选项卡.糟糕的UX设计.

---

您可以使用`input`事件,与8年前相比,它具有更好的浏览器支持.https://developer.mozilla.org/en-US/docs/Web/Events/input触发对字段的每次更改,包括键入,删除,粘贴等.

2> Dylan Beatti..：

---

JS中的文本表单元素公开了.value属性和.defaultValue属性,因此您可以轻松实现以下内容:

function formChanged(form) {
  for (var i = 0; i < form.elements.length; i++) {
      if(form.elements[i].value != form.elements[i].defaultValue) return(true);
  }
  return(false);
}

对于复选框和单选按钮,查看是否element.checked != element.defaultChecked,以及对于HTML 元素,您需要循环遍历select.options数组并检查每个选项是否selected == defaultSelected.

您可能希望使用类似jQuery的框架来将处理程序附加到onchange每个单独表单元素的事件.这些处理程序可以调用您的formChanged()代码并修改enabled"保存"按钮的属性,和/或附加/分离文档正文beforeunload事件的事件处理程序.

3> 小智..：

---

尝试

function isModifiedForm(form){
  var __clone = $(form).clone();
  __clone[0].reset();
  return $(form).serialize() == $(__clone).serialize();
}

希望它的帮助))

推荐阅读

• 程序员

  Get-AzureVM没有返回 - 尝试过的建议

  如何解决《Get-AzureVM没有返回-尝试过的建议》经验，为你挑选了1个好方法。 ... [详细]
• 程序员

  使用数组的引用将数组附加到函数perl中

  如何解决《使用数组的引用将数组附加到函数perl中》经验，为你挑选了1个好方法。 ... [详细]
• 程序员

  何时创建和删除PayPal WebProfile对象(PHP)

  如何解决《何时创建和删除PayPalWebProfile对象(PHP)》经验，为你挑选了0个好方法。 ... [详细]
• 程序员

  谷歌表格,只读回答字段

  如何解决《谷歌表格,只读回答字段》经验，为你挑选了1个好方法。 ... [详细]
• 程序员

  Java中的马尔可夫模型决策过程

  如何解决《Java中的马尔可夫模型决策过程》经验，为你挑选了0个好方法。 ... [详细]
• 程序员

  String Interpolation不会在TeamCity上构建

  如何解决《StringInterpolation不会在TeamCity上构建》经验，为你挑选了1个好方法。 ... [详细]
• 程序员

  有没有办法在Cygwin上使用Python 3.5？

  如何解决《有没有办法在Cygwin上使用Python3.5？》经验，为你挑选了0个好方法。 ... [详细]
• 程序员

  在Android Studio中将图像添加到Java项目？

  如何解决《在AndroidStudio中将图像添加到Java项目？》经验，为你挑选了0个好方法。 ... [详细]
• 程序员

  使div的背景图像不断移动

  如何解决《使div的背景图像不断移动》经验，为你挑选了1个好方法。 ... [详细]
• 程序员

  如何从Xvfb获取显示中的所有进程？

  如何解决《如何从Xvfb获取显示中的所有进程？》经验，为你挑选了0个好方法。 ... [详细]
• 程序员

  Laravel可以处理高流量应用吗？

  如何解决《Laravel可以处理高流量应用吗？》经验，为你挑选了0个好方法。 ... [详细]
• 程序员

  WPF:DockPanel.Dock ="Bottom"无法按预期工作

  如何解决《WPF:DockPanel.Dock="Bottom"无法按预期工作》经验，为你挑选了1个好方法。 ... [详细]
• 程序员

  WP8.1和WP10的区别

  如何解决《WP8.1和WP10的区别》经验，为你挑选了0个好方法。 ... [详细]
• 程序员

  如何在nodejs中使用.write函数用于wav模块

  如何解决《如何在nodejs中使用.write函数用于wav模块》经验，为你挑选了1个好方法。 ... [详细]
• 程序员

  Django模型:在日期,desc顺序上添加索引

  如何解决《Django模型:在日期,desc顺序上添加索引》经验，为你挑选了1个好方法。 ... [详细]
• 程序员

  AngularJS强制Firefox/Safari下载文件而不是在浏览器中打开

  如何解决《AngularJS强制Firefox/Safari下载文件而不是在浏览器中打开》经验，为你挑选了0个好方法。 ... [详细]
• 程序员

  如何在调用ladderize函数后在APE中获得正确的tip标签顺序

  如何解决《如何在调用ladderize函数后在APE中获得正确的tip标签顺序》经验，为你挑选了1个好方法。 ... [详细]
• 程序员

  运行IPyhon.widgets时没有名为"ipywidgets"的模块错误

  如何解决《运行IPyhon.widgets时没有名为"ipywidgets"的模块错误》经验，为你挑选了1个好方法。 ... [详细]
• 程序员

  如何分割4列,一行分为2列,两行？

  如何解决《如何分割4列,一行分为2列,两行？》经验，为你挑选了1个好方法。 ... [详细]
• 程序员

  如何在x86中执行Int64的Interlocked.CompareExchange

  如何解决《如何在x86中执行Int64的Interlocked.CompareExchange》经验，为你挑选了0个好方法。 ... [详细]

吐了个 "CAO" !

吐个槽吧,看都看了

会员登录 | 用户注册