Question

我在Firefox（版本38.05）中有一个非常奇怪的错误。我有一个类似于以下内容的表单，以及一个用于验证的Javascript

<form action='#' onsubmit='return check()'>
    <input type='text' name='asdf'/>
    <input type='submit' name='jkl' value='Submit'/>
</form>

的Javascript

function check(){
    alert("asdf");
    return false;
}

现在永远不应该提交此表格。但是在Firefox中，如果您按照以下步骤操作，则可以在不禁用Javascript的情况下提交它：

点击提交
确认警告对话框
再次点击提交
选中此框以阻止进一步的警报窗口，然后单击确定
点击提交 - ＆gt;表格将提交

这是一个Bug还是一个功能？在Chrome中一切正常。如果打算这样做，我该如何避免呢？

Answer 1

所以当用户阻止调用''时，Firefox和Chrome会有不同的行为！

虽然Chrome只是无声地失败，但当用户阻止它时在Firefox中尝试alert()会抛出异常。只有在函数显式返回false时才会阻止alert个处理程序。

有点脏的修复方法是：

onSubmit

人们需要比我更有动力，并深入研究规范的深度，以了解谁是对的。

Answer 2

阻止ff中的警报窗口导致js错误，有时js之后停止工作，因此return false;未执行尝试像

这样的东西

function check(event){
    event = window.event || event;
    event.preventDefault(); 
    alert("asdf");
    return false;
}

<form action='#' onsubmit='check(event)'>
    <input type='text' name='asdf'/>
    <input type='submit' name='jkl' value='Submit'/>
</form>

Answer 3

每次使用console.log都会有效，但是可以阻止警报，并且不会调用该函数。

如果需要，您可以显示自己的自定义提醒。

您可能应该从内联移动事件处理程序：

HTML：

<form action='#' id="my-form">
    <input type='text' name='asdf'/>
    <input type='submit' name='jkl' value='Submit'/>
</form>

JS：

document.getElementById('my-form').onsubmit = function() {
    console.log("asdf");
    return false;
}

Firefox remove包含alert的函数，因此您需要移动alert out of your function：

这将允许您返回false，即使警报已被禁用！

document.getElementById('my-form').onsubmit = function() {
    console.log("asdf");
    displayAlert();
    return false;
}
function displayAlert() {
    alert("test");    
}

JsFiddle：http://jsfiddle.net/ghorg12110/nddtf13q/

显示自定义提醒：

此代码将显示自定义警告框，firefox无法使用div阻止该警报框。你应该做一些CSS来使它像你想要的那样，但主要的想法是：

HTML：

<form action='#' id="my-form">
    <input type='text' name='asdf' />
    <input type='submit' name='jkl' value='Submit' />
</form>
<div id="alertBox">
    <div id="alertContent">asdf</div>
    <button id="alertOK">OK</button>
</div>

CSS：

#alertBox {
    display:none;
    background: grey none repeat scroll 0 0;
    left: 50%;
    margin-left: -275px;
    position: fixed;
    text-align: center;
    width: 550px;
    z-index: 10;
}

JS：

document.getElementById('my-form').onsubmit = function () {
    displayAlert("asdf");
    return false;
}
function displayAlert(msg) {
    document.getElementById('alertContent').innerHTML = msg;
    document.getElementById('alertBox').style.display = "block";
    document.getElementById('alertOK').onclick = function () {
        document.getElementById('alertBox').style.display = "none";
    };
}

JsFiddle：http://jsfiddle.net/ghorg12110/dkruqsqv/

为什么要提交此表单？（火狐）

3 个答案:

为什么要提交此表单？ （火狐）

3 个答案:

为什么要提交此表单？（火狐）