HTML 5: Atributo spellcheck

Algunos navegadores, por defecto, tiene habilitado el corrector ortográfico en aquellos campos de texto que encuentre en el sitio web donde estemos navegando. El motivo es que muchos de ellos han decidido que el atributo spellcheck está habilitado por defecto en aquellos campos donde no se especifique el atributo spellcheck.

¿Qué es spellcheck?

El atributo spellcheck le indica al navegador si puede comprobar o no la ortografía de un texto editable de un sitio web. Por lo general, la forma de indicarnos que una palabra no está escrita de manera correcta es a través de un subrayado rojo, de la misma manera que podemos encontrar en los editores de texto más comunes. Por otro lado, es frecuente que podamos obtener sugerencias para la corrección posicionando el cursor sobre la palabra y activando el menú contextual con el botón derecho.

Para indicar de manera explícita si queremos o no esta funcionalidad adicional en nuestros campos de texto, ya sean textarea o input del tipo text, basta con asignar el atributo spellcheck=»true» o spellcheck=»false» según nos convenga.

En el siguiente ejemplo podemos comprobar ambos estados y cómo detectar si nuestro navegador soporta dicha funcionalidad:

<!DOCTYPE html>
<html>
<head></head>
<body>
    <header>
        <h1>
            HTML 5: Spellcheck
            (<span id="support">Your browser does not support spellcheck attribute</span>)
        </h1>
    </header>
    <article>
        <div>
                  
        </div>
        <textarea spellcheck="true" placeholder="spellcheck='true'"></textarea>
        <textarea spellcheck="false" placeholder="spellcheck='false'"></textarea>
    </article>    
</body>
</html>​​

A través de este enlace podemos acceder al ejemplo completo.

Como siempre, espero que sea de utilidad 🙂

¡Saludos!