获取浏览器自动完成设置的单选按钮的值

Question

我在获取浏览器先前呈现的页面上的单选按钮输入字段的当前状态时遇到问题。场景是这样的：

呈现包含输入元素的页面，组中的第一个单选按钮具有 'checked' 属性
用户选择了不同的单选按钮（例如第三个选项），然后导航到另一个页面
用户点击浏览器'back'按钮重新显示页面

此时，浏览器自动完成已将第三个单选按钮设置为显示为选中状态，但第一个单选按钮仍具有 'checked' 属性。这意味着任何 javascript 试图获取当前选择的单选按钮值 return 是第一个输入元素的值，而不是第三个（视觉上选择的）。

有谁知道 javascript 可以用于 return 视觉选择的单选按钮，而不是具有 'checked' 属性的元素？

注意：我知道我可以在输入元素上使用 autocomplete="off" 禁用它，但是能够保留单选按钮选择会很好，否则自动完成在使用 javascript.

的场景

我实际上在我的实时应用程序中使用 jQuery，因此 jQuery 或 javascript 解决方案都是可以接受的。

这里有一些基本的 html 可以说明这个问题。您需要将以下内容保存在本地 .html 文件中，将其加载到浏览器中，导航到另一个页面，然后单击 'back' 查看问题。

<html>

<head></head>

<body>

    <h1>Radio test</h1>

    <label>
        <input name="test" type="radio" value="1" checked>
        Value 1
    </label>
    <label>
        <input name="test" type="radio" value="2">
        Value 2
    </label>
    <label>
        <input name="test" type="radio" value="3">
        Value 3
    </label>

    <div id="message"></div>
</body>

<script lang="javascript">

    var rv = document.querySelector('input[name="test"]:checked').value;
    document.getElementById("message").innerText = rv;

</script>

</html>

如果加载页面，它将如下所示：

Select 'Value 3'，导航到另一页（例如从书签，或输入 url），然后单击 'Back' 按钮。该页面现在将显示：

即'Value 3' 单选按钮显示为已选中，但使用 javascript 获取值仍显示 'Value 1' 已选中（因为这是具有 'checked' 属性的元素）。

Answer 1

当您向后导航时，浏览器会恢复以前的表单状态。但是它发生在你的代码执行之后。

你能做的就是监听Window::pageshow事件。它将确保您的脚本已准备好读取最终检查状态：

window.onpageshow = () => {
  var rv = document.querySelector('input[name="test"]:checked').value;
  document.getElementById("message").innerText = rv;
};

获取浏览器自动完成设置的单选按钮的值

Getting the value of a Radio button set by browser autocomplete

javascript

html

browser

autocomplete

radio-button