feed twitter facebook LinkedIn facebook

HTML5 » Activar el corrector ortográfico con HTML5

marzo 6, 2012 por Víctor Cuervo 2 Comentarios Imprimir Imprimir

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".

Visualizar el Codigo
Visualiza el artículo
Descargar el Codigo
Descargar el código
Error en el Codigo
Error en el código
Foro sobre HTML5
Foro sobre HTML5
tags: , ,

Artículos relacionados:

2 comentarios »

RSS feed para los comentarios de esta entrada. TrackBack URI

  1. Richard
    agosto 6, 2012 #

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

Deja un comentario

XHTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

*