在 Mac 机器上 onblur 后触发 Onclick答案

【问题标题】：Onclick triggered after onblur on Mac machines在 Mac 机器上 onblur 后触发 Onclick
【发布时间】：2010-07-13 12:18:02
【问题描述】：

我们在一个表单中有几个文本框。所有这些都经过验证onblur。表单提交onclick 的锚标记。

<script>
function validateMyText(){
    // do field validation
    // if success
    return true;
    // else {
    alert("Please check the text box value");
    return false;
    }
}
</script>

<form name="myform" action="mytestpage.jsp">
    <input type="text" name="myText" id="myText" onblur="return validateMyText()"/>
    <a href="#" onclick="mytestpage.jsp">Submit</a>
</form>

Windows 平台浏览器（Firefox、Safari、Chrome、IE）：当validateMyText() 返回 false 时，onclick 不会被触发。这是预期的和现有的行为。

Mac 平台浏览器（Firefox、Safari）：即使validateMyText() 返回 false，也会触发 onclick 事件，提交表单。

背景：这是一个遗留应用程序，仅在 Windows 平台和 IE 浏览器上受支持。现在它必须得到增强，才能在 Windows 上的所有浏览器（Firefox、Safari、Chrome、IE）和 Mac 上的 Firefox、Safari 上运行。

【问题讨论】：

看看一些代码会很有用。我们可以吗？
由于html标签而遗漏了代码。请立即检查。很抱歉我不能很好地缩进它...... 4 空格缩进似乎不起作用..
它确实有效，我刚刚为你更新了它。

标签： javascript macos dom-events

【解决方案1】：

如果我没看错的话，看起来应用程序依赖于在任何具有“无效”数据的字段的blur 事件之后返回的false 来中断表单提交。然后，假设任何其他未聚焦的字段都是有效的，您不能在不使其有效的情况下离开文本字段，并且您单击锚标记的唯一方法是保留先前选择的文本域。很多假设。最好的说法是它很脆弱——如果用户按 Enter 键呢？

至少，我会创建一个新函数来处理表单提交。我不知道那个锚标签现在发生了什么。为清楚起见，请在表单标签中添加一个 ID。那么：

<a href="#" onclick="document.getElementById('myform').submit(); return false;">

现在默认点击将被禁止，您将运行表单的“自然”提交行为。由于我们需要在提交前进行验证，所以让我们在表单级别添加一个onsubmit 事件处理程序：

<form name="myform" id="myform" action="mytestpage.jsp" onsubmit="return submitForm();">

现在我们将运行表单级别的验证，并返回true 提交，false 没有提交。在你的 JavaScript 中添加这样的内容：

function submitForm() {
    // identify fields eligible for validation
    // validate them according to your rules
    // then submit the form
    if( all_your_fields_are_valid ) { // for you to figure out
        return true;
    } else {
        // dialog explaining problem?
        // highlight bad fields?
        return false;
    }
}

您仍然会收到有关无效数据的逐个字段警告，但现在至少您明确地捕获了表单提交，并将表单视为具有自身整体有效和无效状态的实体。这样的设置应该可以在任何平台上的任何现代浏览器中正常工作。

话虽如此，我强烈建议添加great JS frameworks 之一。它们会让事情变得更容易，尤其是当您希望清理行为并将其移植到大量现有代码中时。

【讨论】：