MAC OS Catalina 10.15

Question

如果<select>元素具有selected选项，则即使使用浏览器的“向后导航”功能，即使autocomplete="off"元素上的<select>，Chrome也会忽略该所选选项。我发现一种解决方法是将选择内容包装在<form>中，但我不想在HTML中添加多余的形式。

问题：有没有一种方法可以在Chrome中解决此问题，而无需包装表单元素？（此行为在Firefox中不会发生，尚未测试其他浏览器）

要使用Chrome 77进行复制：

1。）访问此jsfiddle，并将两个选择都更改为“一个”。请注意，“两者”是两者的选定选项，因此，在页面加载时，这是在两个元素中都应选择的

2。）单击指向google的链接（实际上不会发生页面导航，jsfiddle输出实际上不能导航到网页）

3。）用鼠标单击jsfiddle输出，然后单击浏览器的后退按钮

4。）您将注意到，包装在表单中的select元素默认情况下具有正确的元素“ Two”。未包装在表单中的select元素选择了错误的元素“ One”

https://jsfiddle.net/m5hg8n40/1/

<!-- chrome ignores 'selected' -->
<select autocomplete="off">
  <option value="1">One</option>
  <option value="2" selected>Two</option>
</select>

<br><br>
<a href="https://google.com">google.com</a>
<br><br>

<!-- chrome obeys 'selected' -->
<form autocomplete="off">
  <select>
    <option value="1">One</option>
    <option value="2" selected>Two</option>
  </select>
</form>

Answer 1

MAC OS Catalina 10.15

浏览器

Google Chrome 版本77.0.3865.120（正式版本）（64位）
Safari版本 13.0.2（15608.2.30.1.1）
Firefox 70.0

经过测试的动作

加载我看到的jsfiddle并选择two选项
如果我单击google链接并返回，则两者都保持选中two
如果我首先修改（不带表格）选择为one，请转到google并转到返回，它会保持选中one
如果我将第二个选择项（带有表格）修改为one，请转到google，然后转到返回，它将显示选中的two选项

据我所知。两者均在加载时有效，但是window History对待两个输入选择（如果它们都包装在<form>标签中，则略有不同）

一个将保留执行的最后一个动作，另一个将优先使用表单将其输入重置为默认状态。

Excepcion：Firefox以相同的行为对待它们（就像没有表单一样）

对我来说，在您需要的地方使用标签似乎是合法的，即使它们将在本地或远程使用，也可以用来收集数据。（并不比到处都有1047248 <div>且零semantic HTML的页面差），所以我认为这取决于您。而且，如果您需要以其他方式存储数据，则可以使用LocalStorage

Answer 2

我认为没有js就无法做任何事情。

<body onload="document.querySelector('select').value = document.querySelector('select [selected]').value">
<select>
  <option value="1">One</option>
  <option value="2" selected>Two</option>
</select>

<br><br>
<a href="https://google.com">google.com</a>
<br><br>

<form autocomplete="off">
  <select>
    <option value="1">One</option>
    <option value="2" selected>Two</option>
  </select>
</form>
</body>

Chrome 77缓存<select>选定的选项，即使autocomplete =“ off”

2 个答案:

MAC OS Catalina 10.15

浏览器

经过测试的动作