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

编程问答 2022-08-17

问题描述

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

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

有人知道什么javascript可以用来返回视觉选择的单选按钮，而不是具有'checked'属性的元素吗？

注意：我知道我可以在输入元素上使用autocomplete="off"禁用此功能，但是能够保留单选按钮的选择会很好，因为否则在使用以下情况下，自动完成功能会变得毫无意义javascript。

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

这是一些演示该问题的基本html。您需要将以下内容保存在本地.html文件中，将其加载到浏览器中，导航到另一个页面，然后单击“返回”以查看问题。

<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>

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

RadioTest1

选择“值3”，导航到另一页（例如，从书签或输入网址），然后单击“上一步”按钮。该页面现在将显示以下内容：

enter image description here

即“值3”单选按钮显示为已选中，但使用javascript获取值仍显示为“值1”已被选中（因为该元素具有“已选中”属性）。

解决方法

当您向后浏览时，浏览器将还原以前的表单状态。但是它会在您的代码执行后发生。

您可以做的是听Window::pageshow事件。它将确保您的脚本已准备就绪，可以读取最终检查状态：

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