Activar el corrector ortográfico con HTML5

La verdad es que casi todos los navegadores modernos ya incluyen dentro de sus plataformas un corrector ortográfico. Algo que no sucedía en las versiones más antiguas.

Una de las cosas que podemos hacer gracias a HTML5 es la de activar o desactivar el corrector ortográfico sobre un determinado elemento. Es decir, pasamos a tener control de esta característica del navegador.

El atributo spellcheck

El atributo que nos da el control sobre el corrector ortográfico con HTML5 es spellcheck. El atributo spellcheck está presente en todos los elementos del lenguaje HTML5. Los valores que puede tomar este atributo son "true" y "false". En el primer caso es para activar el corrector ortográfico y en el segundo caso es para deshabilitarlo. Por defecto, el valor que tiene este atributo es "true".

Así, si queremos inhabilitar el corrector ortográfico sobre un área de texto escribiríamos lo siguiente:

<textarea spellcheck="false"></textarea>

Modificar el corrector con Javascript

Pero no solo podemos jugar con los valores de este atributo en el código HTML5, si no que de forma dinámica, mediante Javascript, podemos modificar sus valores.

De esta forma vamos a añadir unos botones para habilitar y deshabilitar el corrector.

<button id="habilitar">Habilitar Corrector</button>
<button id="deshabilitar">Deshabilitar Corrector</button>
<textarea id="mitexto"></textarea>

Ahora lo que haremos será capturar los eventos click de dichos botones para activar y desactivar el corrector respectivamente.

document.getElementById("habilitar").addEventListener("click", function() {
  document.getElementById("mitexto").spellcheck = true;
});

document.getElementById("deshabilitar").addEventListener("click", function() {
  document.getElementById("mitexto").spellcheck = false;
});

Vemos que sobre el elemento textarea, del cual obtenemos la referencia con .getElementById, manipulamos su atributo spellcheck asignándole "true" o "false".