Javascript:事件处理/内容更新/提交

Question

这是我的简单HTML表单（简称）：

<form name="formular" action="./import.php" method="post" onsubmit="buttonClicked();">
    <input name="notes" onchange="notesChanged();" />
    <input name="info" onchange="infoChanged();" />
    <input name="doit" class="button" type="submit" value="validate" />
</form>

当这两个字段更改时，按钮标签可能会更改为"提交"、"提交不同"或返回"验证"。当编辑并通过"选项卡"留下一个字段时，效果很好：向用户显示特殊的方式，提交表单。

我的问题：

当一个字段被更改并且不是通过"选项卡"离开，而是直接通过单击按钮离开时，标签也可能被更改，在这种情况下，不应提交表单。

我不知道如何处理这种情况，因为所有字段事件都是在任何按钮事件之前处理的。

Answer 1

在较新的浏览器中，您可以使用input事件。这与change事件的功能类似，但不需要元素在激发之前失去焦点（因为按下了选项卡键或用户单击了页面上的其他位置）。MDN条目包含有关浏览器支持的信息。

这将确保在用户对其他两个输入进行更改时，以及在用户单击按钮之前，更新按钮的文本。

Answer 2

您可以使用jquery添加模糊事件。当输入字段失去焦点时会触发：

<script type="text/javascript">
   $(function () {
     $('#notes').blur(function () {
       notesChanged();
     });
     $('#info').blur(function () {
       infoChanged();
     });
   });
</script>

<form name="formular" action="./import.php" method="post" onsubmit="buttonClicked();">
   <input id="notes"/>
   <input id="info"/>
   <input name="doit" class="button" type="submit" value="validate" />
</form>