将拼写检查属性设置为 false 不会删除红色下划线

Question

我正在尝试在 <textarea spellcheck='true'> 和 <textarea spellcheck='false'> 之间切换。

Chrome：一旦设置了spellcheck=true，就不能“取消设置”，即即使设置为false，红色下划线不会消失（至少在 macOS 上）。

Firefox：表现符合预期

Safari：我还是不明白它在做什么，只有当我点击它时才会出现红色下划线，然后它不会消失。

我怀疑这是 OS 特有的。感谢其他 OS 的报告。

const textarea = document.querySelector("textarea");
const form = document.querySelector("form");
const output = document.getElementById("output");

textarea.focus();

form.addEventListener("change", (e) => {

 const trueOrFalse = e.target.value;
 textarea.focus();
 textarea.setAttribute("spellcheck", trueOrFalse);
 output.textContent = textarea.parentNode.innerHTML;

});

body {
  font: 16px/140% monospace;
  background: #eee;
  color: #777;
  padding: 60px;
}

textarea {
 margin: 32px 0;
 width: 320px;
 height: 120px;
 font-size: 16px;
}

label {
 color: #777;
 cursor: pointer;
}

input[type="radio"]:checked + span {
  color: #000
}

<form>
  <label>
    <input type="radio" value="true" name="spellcheck" />
    <span>spellcheck true</span>
  </label>
  <label>
  <input type="radio" value="false" name="spellcheck" checked />
   <span>spellcheck false</span>
  </label>
</form>
<div>
  <textarea spellcheck="false">Here is an example of a misspeltz word</textarea>
</div>

<div id="output">
</div>

Answer 1

我发现实现（至少在 Chrome 中）是 spellcheck 模式仅适用于新插入的文本。为了完全“重置”该字段，您需要删除并重新插入 textarea.

var textarea = document.querySelector("textarea");
const form = document.querySelector("form");
const output = document.getElementById("output");

textarea.focus();

form.addEventListener("change", (e) => {

 const trueOrFalse = e.target.value;
 const text = textarea.value;
 textarea.parentNode.removeChild(textarea);
 textarea = document.createElement("textarea");
 textarea.textContent = text;
 document.querySelector(".textarea-container").appendChild(textarea);
 
 textarea.focus();
 textarea.setAttribute("spellcheck", trueOrFalse);
 output.textContent = textarea.parentNode.innerHTML;

});

body {
  font: 16px/140% monospace;
  background: #eee;
  color: #777;
  padding: 60px;
}

textarea {
 margin: 32px 0;
 width: 320px;
 height: 120px;
 font-size: 16px;
}

label {
 color: #777;
 cursor: pointer;
}

input[type="radio"]:checked + span {
  color: #000
}

<form>
  <label>
    <input type="radio" value="true" name="spellcheck" />
    <span>spellcheck true</span>
  </label>
  <label>
  <input type="radio" value="false" name="spellcheck" checked />
   <span>spellcheck false</span>
  </label>
</form>
<div class="textarea-container">
  <textarea spellcheck="false">Here is an example of a misspeltz word</textarea>
</div>

<div id="output">
</div>

将拼写检查属性设置为 false 不会删除红色下划线

Setting spellcheck attribute to false does not remove red underlines

javascript

google-chrome