Javascript - 获取当前控件位置的表单

Question

我有一个表单，它有 4 个输入元素。如果用户只输入两个条目并单击屏幕上的任意位置(在表单外)...我想保存详细信息...就像自动保存一样。

我有我的表单 ID..我想与屏幕上当前控件的表单 ID 进行比较..这样我可以在两个表单 ID 不同时保存数据..

你能告诉我如何获取屏幕上当前控件位置的表单 ID(有时控件可能在表单之外......在这种情况下，当前控件位置的表单 ID 将为空)......但是如何我可以在 javascript 中确定吗？

请建议...

非常感谢， jack 。

Answer 1

这是个有趣的问题。

好吧，如果你不考虑一下(正如我承认的那样)，你就会挂上 blur HTML 事件 <form>有问题的元素。

<form onblur="autosave(this)">

但是，HTML <form>元素不支持该事件。太糟糕了。

然后我想到了 jQuery 的新 1.4 focusout() 事件。

$('form').focusout(function() { autosave(this); });

不幸的是，当您跳转(tab、单击)到同一表单内的下一个输入字段时，该事件也会被触发。不太好，在每次跳地时自动保存可能太昂贵了。与 $(':input').blur(function() { autosave(this.form); }); 相同的效果.

然后我尝试使用 focusin() 的另一种方式:

$('form').focusin(function() {
    $(this).addClass('focused');
});
$(':not(form)').focusin(function(e) {
    if (!$(e.target).parents('form.focused').length) {
        var form = $('form.focused').removeClass('focused');
        autosave(form);
    }
});

奇怪的是，这只在 IE 中有效，在其他浏览器中无效。这将是另一个 IE 错误/怪癖 focus被输入元素以外的所有元素支持。

您最好的选择可能是 Hook click() 而是事件。

$('form').focusin(function() {
    $(this).addClass('focused');
});
$(':not(form)').click(function(e) {
    if (!$(e.target).parents('form.focused').length) {
        var form = $('form.focused').removeClass('focused');
        autosave(form);
    }
});

这很好用。你可以在这里找到一个 live demo .

_{请注意，我并不是要让您难以理解 jQuery(一个疯狂简化 HTML DOM 遍历和操作的 JS 库)，但我在plain< 中看不到好的方法/em> JavaScript 无需编写比此处代码多 10 倍的代码即可实现此目的。}