Activar el corrector ortográfico con HTML5

06/mar/2012 HTML5 , , 2 Comentarios
Logo 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 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:

  1. <textarea id="texto" rows="12" cols="100" spellcheck="false">Texto</textarea>

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.

  1. <button id="validar">Validar la Ortografía</button>
  2. <button id="novalidar">Quitar la Validación</button>

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

  1. var boton = document.getElementById("validar");
  2. var boton2 = document.getElementById("novalidar");
  3. var texto = document.getElementById("texto");
  4.  
  5. boton.addEventListener("click",function(ev){
  6. texto.spellcheck = true;
  7. texto.focus();
  8. },true);
  9.  
  10. boton2.addEventListener("click",function(ev){
  11. texto.spellcheck = false;
  12. texto.focus();
  13. },true);
  14.  

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

Difunde el Conocimiento

Si te ha gustado el artículo o te ha sido de utilidad, no dejes de compartirlo con tus amigos en las redes sociales... Te estaremos muy agradecidos. :-D

2 comentarios en “Activar el corrector ortográfico con HTML5”

Víctor Cuervo

Richard

No funciona la aplicación.
Requiero ayuda para poner a funcionar en mi web

¿Algo que nos quieras comentar?

Déjanos tu comentario, no te preocupes que tu email no será publicado

*


*