XHTML-CSS, Accesibilidad, PHP y más
Inicio
Desarrollo web
Javascript
HTML 5: Atributo placeholder
Resulta muy habitual encontrarse con campos de texto que contienen un valor por defecto que ayuda al usuario a comprender que información debe introducir en dicho campo. El comportamiento habitual es que cuando el usuario activa el campo el texto desaparezca.
Este es el estado antes de activar el campo y una vez se desactiva sin haber introducido datos:

Y este es el estado del campo activado antes de haber introducido información:

Para obtener ese efecto es necesario el uso de Javascript, pero con HTML 5 eso se va a terminar.
Sería tan sencillo como añadir el atributo placeholder con el texto a mostrar, como en el siguiente ejemplo:
<p>
<label for="c_texto">Campo de texto:
<input type="text" id="c_texto" placeholder="Datos campo texto" />
</label>
</p>
<p>
<label for="c_area">Campo textarea:
<textarea id="c_area" cols="45" rows="5" placeholder="Datos campo textarea"></textarea>
</label>
</p>
Como puede observar puede utilizarse en elementos input de tipo texto, y en textarea.
Tiene dos inconvenientes:
El primer problema es fácil de solventar, añadiendo el atributo mediante Javascript:
function textoCampo (id,texto) {
document.getElementById(id).placeholder = texto;
}
textoCampo('c_texto','Datos en campo texto');
Puedes comentar o hacer trackback desde tu propio sitio web.
Si el comentario no guarda relación con el tema del artículo o los comentarios previos, si la redacción del mismo es ilegible (estilo HOYGAN), o si contiene insultos u otros términos ofensivos, será borrado de inmediato.
Todavía no hay comentarios.