如何解决通过浏览器自动完成获取单选按钮设置的值
我在获取单选按钮输入字段的当前状态时遇到问题,该页面位于浏览器先前呈现的页面上。情况是这样的:
- 呈现包含输入元素的页面,并且该组中的第一个单选按钮具有'checked'属性
- 用户选择其他单选按钮(例如第三个选项),然后导航到另一个页面
- 用户单击浏览器的“后退”按钮以重新显示页面
这时,浏览器自动完成功能已将第三个单选按钮设置为显示为选中状态,但第一个单选按钮仍具有“选中”属性。这意味着任何试图获取当前选定的单选按钮值的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>
如果加载页面,它将如下所示:
选择“值3”,导航到另一页(例如,从书签或输入网址),然后单击“上一步”按钮。该页面现在将显示以下内容:
即“值3”单选按钮显示为已选中,但使用javascript获取值仍显示为“值1”已被选中(因为该元素具有“已选中”属性)。
解决方法
当您向后浏览时,浏览器将还原以前的表单状态。但是它会在您的代码执行后发生。
您可以做的是听Window::pageshow事件。它将确保您的脚本已准备就绪,可以读取最终检查状态:
window.onpageshow = () => {
var rv = document.querySelector('input[name="test"]:checked').value;
document.getElementById("message").innerText = rv;
};
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。