Chrome 和 Opera 中的复选框切换

Question

重现问题的步骤：

1. 在您的浏览器 Settings select Continue where you/I left off 下 On startup。
2. 导航至 demo。
3. 勾选复选框。
4. 编辑文本。
5. 关闭浏览器并重新打开。或者 duplicate/clone 选项卡。

现在如您所见，复选框已选中，但文本区域未着色。
我在 Chrome 的最新版本和 Windows 10 的 Opera 中尝试过。我不确定 Safari，但它的行为方式可能相同。

问题：

• 为什么会这样？
• 什么是跨浏览器解决方案？

Answer 1

尝试

window.onload = function() {
  document.getElementById('colorsToggle').onchange = function() {
    document.getElementById('textField').classList.toggle('tan');
  }
  document.getElementById('textField').classList.toggle(document.getElementById('colorsToggle').checked ? "tan" : "white");
};