Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

150
Views
¿Cómo alternar el atributo `spellcheck` de `<textarea>` con una casilla de verificación?

Me gustaría tener una casilla de verificación que, cuando esté marcada, habilite el atributo de spellcheck de <textarea> y viceversa.

Sin embargo, no estoy seguro de si esto es posible.

Este es mi código hasta ahora:

 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>

¿Cómo logro este objetivo?

about 4 years ago · Juan Pablo Isaza
3 answers
Answer question

0

Puede agregar un detector de eventos al evento de change en el elemento de la casilla de verificación y luego usar setAttribute para establecer el spellcheck en el valor de la casilla de verificación.

 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>

about 4 years ago · Juan Pablo Isaza Report

0

Su sintaxis no funcionaría porque no puede asignar el resultado de una función.

El atributo del spellcheck tiene el requisito algo extraño de que sus valores deben coincidir exactamente con "true" o "false" . Esto significa que es un atributo enumerado, pero no un atributo booleano. Pero los valores son literales booleanos, como cadenas.

Si encuentra algún atributo que se comporta de esta manera, así es como puede cambiarlo:

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

JSON.parse acepta (entre otras cosas) un literal booleano como una cadena, es decir, "true" o "false" , y lo convierte en un booleano real. El valor de la cadena se recupera con getAttribute . El NOT lógico ( ! ) invierte el booleano analizado. Luego, setAttribute establece el resultado (no es necesario volver a convertir el booleano en una cadena: los valores de los atributos solo pueden ser cadenas, por lo que setAttribute realiza esta conversión por usted).

Si tenía un atributo booleano verdadero como contenteditable , entonces esto es mucho más fácil de hacer con toggleAttribute .

Su detector de eventos se basa en el evento de click . Pero alternar una casilla de verificación se puede lograr de muchas otras maneras (por ejemplo, navegación con teclado, toque, etc.). Utilice el evento de change en su lugar.

 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>

about 4 years ago · Juan Pablo Isaza Report

0

  • Para manejar eventos de casilla de verificación, use change en lugar de click .
  • Use un argumento dentro de function(e) para acceder al evento. Puede usar cualquier argumento en lugar de e .
  • Use e.target.checked que devolverá true si está marcado y false si no.
  • Luego realiza cualquier acción

 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>

about 4 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!