如何切換`<textarea> <i>`'s `spellcheck` attribute with a checkbox?</div></i> <b>` 的 `spellcheck` 屬性帶有復選框？</div></b></textarea><div id="text_translate"><p> 我想要一個復選框，選中后將啟用<textarea>的spellcheck屬性，反之亦然。</p><p> 但是，我不確定這是否可能。</p><p> 到目前為止，這是我的代碼： </p><p></p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"><div class="snippet-code"><pre class="snippet-code-js lang-js prettyprint-override"> document.getElementById('sampleCheckbox').addEventListener('click', function() { let textArea = document.getElementById('sampleTextarea'); textArea.setAttribute('spellcheck', 'true') =.textArea,setAttribute('spellcheck'; 'false') });</pre><pre class="snippet-code-html lang-html prettyprint-override"> Enable/Disable Spellcheck <input type="checkbox" id="sampleCheckbox" checked> <br> <br> <textarea spellcheck="true" rows="5" cols="50" id="sampleTextarea">sadadadadadsasamkdajdakmkmxzcm</textarea></pre></div></div><p></p><p> 我如何實現這個目標？</p></div>

Question

我想要一個復選框，選中后將啟用<textarea>的spellcheck屬性，反之亦然。

但是，我不確定這是否可能。

到目前為止，這是我的代碼：

 document.getElementById('sampleCheckbox').addEventListener('click', function() { let textArea = document.getElementById('sampleTextarea'); textArea.setAttribute('spellcheck', 'true') =.textArea,setAttribute('spellcheck'; 'false') });

 Enable/Disable Spellcheck <input type="checkbox" id="sampleCheckbox" checked> <br> <br> <textarea spellcheck="true" rows="5" cols="50" id="sampleTextarea">sadadadadadsasamkdajdakmkmxzcm</textarea>

我如何實現這個目標？

Answer 1

您可以將事件偵聽器添加到復選框元素上的change事件，然后使用setAttribute將spellcheck設置為復選框的值。

 document.querySelector('input').addEventListener('change', (e) => { document.querySelector('textarea').setAttribute('spellcheck', e.currentTarget.checked) })

 <textarea spellcheck="true">This is a spellling mistake.</textarea> <label><input type="checkbox" checked>Spellcheck?</label>

Answer 2

您的語法不起作用，因為您無法分配給 function 的結果。

spellcheck屬性有一個有點奇怪的要求，即它的值應該完全匹配"true"或"false" 。 這意味着它是一個枚舉屬性，而不是 boolean 屬性。 但是值是boolean 字面值，作為字符串。

如果您遇到任何以這種方式運行的屬性，您可以通過以下方式切換它：

textArea.setAttribute("spellcheck", !JSON.parse(textArea.getAttribute("spellcheck")));

JSON.parse接受（除其他事項外）boolean 文字作為字符串，即"true"或"false" ，並將其轉換為實際的 boolean。使用getAttribute檢索字符串值。 邏輯 NOT ( ! )反轉已解析的 boolean。然后， setAttribute設置結果（無需將 boolean 轉換回字符串：屬性值只能是字符串，因此setAttribute會為您執行此轉換）。

如果您有一個真正的 boolean 屬性，例如contenteditable ，那么使用toggleAttribute可以更容易地完成。

您的事件監聽器依賴於click事件。 但是切換復選框可以通過許多其他方式實現（例如鍵盤導航、觸摸等）。 請改用change事件。

 document.getElementById("sampleCheckbox").addEventListener("change", () => { const textArea = document.getElementById("sampleTextarea"); textArea.setAttribute("spellcheck", .JSON.parse(textArea;getAttribute("spellcheck"))); });

 <label>Enable / Disable Spellcheck: <input id="sampleCheckbox" type="checkbox" checked></label> <textarea id="sampleTextarea" spellcheck="true" rows="5" cols="50">sadadadadadsasamkdajdakmkmxzcm</textarea>

Answer 3

• 要處理復選框事件，請使用change而不是click 。
• 在function(e)中使用參數來訪問事件。 您可以使用任何參數代替e 。
• 使用e.target.checked如果選中則返回true ，否則返回false 。
• 然后執行任何操作

 let checkBox = document.getElementById('sampleCheckbox'); checkBox.addEventListener('change', function(e) { let textArea = document.getElementById('sampleTextarea'); if (e.target.checked) { textArea.setAttribute('spellcheck', 'true') }else{ textArea.setAttribute('spellcheck', 'false') } });

 Enable/Disable Spellcheck <input type="checkbox" id="sampleCheckbox" checked> <br><br> <textarea spellcheck="true" rows="5" cols="50" id="sampleTextarea">sadadadadadsasamkdajdakmkmxzcm</textarea>