Firefox 错误地记住单选按钮答案

【问题标题】：Firefox remembering radio buttons incorrectlyFirefox 错误地记住单选按钮
【发布时间】：2015-07-28 23:24:18
【问题描述】：

在 Firefox 7.0.1 中，我有两个复选框和许多其他输入。

当我通过 jQuery 添加另一个输入时，Firefox 无法正确记住选择了哪些单选输入。

例如，如果我选择第一个单选按钮然后刷新页面，则选择第二个单选按钮而不是第一个单选按钮，如果我再次刷新，则不会选择单选按钮。

您应该能够将下面的代码复制并粘贴到一个新文件中以供您自己测试：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type"/>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
    <script>
    $(document).ready(function(){
    $('select').after('<input class="select" type="text" name="new_text_input" />');
});
    </script>
    <title>Pretty jQuery Form</title>
</head>
<body>
<form>
    <fieldset>
        <label>Select Box</label>
        <select name="my_select">
            <option>Option 1</option>
            <option>Option 2</option>
            <option>Option 3</option>
            <option>Option 4</option>
        </select>
    </fieldset>
    <fieldset>
        <label>Text Input</label>
        <input class="text" id="text_input" name="input" type="text" />
    </fieldset>
    <fieldset>
        <label>Text Area</label>
        <textarea></textarea>
    </fieldset>
    <fieldset>
        <label>Radio</label>
        <input value="1" name="radio" id="radio1" type="radio" /> <label for="radio1">Radio 1</label>
        <input value="2" name="radio" id="radio2" type="radio" /> <label for="radio2">Radio 2</label>
    </fieldset>
</form>
</body>
</html>

我应该注意到，我实际上想要做的事情更复杂，但经过数小时的调试，我已经设法将其缩小到这个范围。

【问题讨论】：

你的意思是提交表单之后还是刷新页面？我认为任何浏览器都不会正式声称如果他们在填写表单并提交之前只是刷新，就可以记住用户输入。
我感觉 Firefox 有，或者至少习惯了。尽管如此，在每次刷新时检查不同单选按钮的方式仍然存在问题。
正式我的意思是考虑到 DOM 通过 JS 的延展性，预期的索引可能不存在，它留待解释。它所谓的内存有可能是基于 dom 中的基本数字位置，并且由于这种意外插入，它误用了它。因此，对您而言，可能有必要设置一个包含您预期表单状态的 js cookie 并将其应用到您的 document.ready 调用中。
这是一种可能性，虽然它看起来有点过分，但我原以为这样的“错误”会更广为人知，如果它只是浏览器使用非常糟糕的方法的情况缓存单选按钮的选中状态。尤其是考虑到如今基于 javascript 的表单有多么突出。
...所以换句话说，FF 可能会尝试，但没有正式声称它保证这将是完美的，因为上面的评论。您可以将表单的状态保存在每个元素的模糊处。

标签： firefox radio-button

【解决方案1】：

有一篇关于这个问题的文章：http://www.ryancramer.com/journal/entries/radio_buttons_firefox/

五年前首次报告了该错误：https://bugzilla.mozilla.org/show_bug.cgi?id=394782

解决方案：

<form autocomplete="off">

或者使用 jQuery：

$(document).ready(function() {
    if ($.browser.mozilla) $("form").attr("autocomplete", "off");   
});

也可以通过将 autocomplete="off" 放在单选按钮本身上来防止该问题（这样您仍然可以自动完成其他表单字段）。

【讨论】：

我刚刚遇到了这个问题，其中一组单选按钮和 Firefox 选择了第一个单选按钮，即使第三个单选按钮具有“已选中”属性。 Chrome 和 IE 正确显示选择的第三个按钮。我向组中的每个单选按钮添加了建议的“autocomplete="off"”，现在 Firefox 正确显示了第三个选中的单选按钮。
这个问题仍然存在，尽管我们只在 Mac OS（特别是 High Sierra）上的 Firefox 中遇到过。在运行 Windows 10 的 PC 上，未出现复选框问题。

【解决方案2】：

应检查的单选输入保留属性checked="checked"，因此查找该输入元素并手动检查它为我解决了这个问题：

$('input[type="radio"][checked="checked"]').prop('checked', true);

【讨论】：