Una mirada al atributo de marcador de posición HTML5
Una de mis piezas favoritas en HTML5 es la posibilidad de agregar Texto del marcador fácilmente. El texto del marcador de posición es el texto gris que se encuentra en un campo de entrada que se utiliza para dar una pista a los usuarios sobre qué entrada se espera en ese campo. Una vez que los usuarios comienzan a escribir en el entrada campo, este texto desaparecerá.
En los viejos tiempos, comúnmente hacemos esto con JavaScript, como sigue;
No hay nada malo con esta práctica, pero es más fácil en HTML5.
HTML5 introdujo un nuevo atributo con un nombre lógico; marcador de posición. Aquí hay un ejemplo:
Si lo vemos en los navegadores, la entrada ahora debería tener el texto gris, como se ve a continuación;
Algunas cosas que deben tenerse en cuenta: según la especificación, la marcador de posición atributo no debe ser utilizado como una alternativa a una etiqueta y también se sugiere que este atributo solo se aplique a entrada tipos que requieren texto, por ejemplo. texto, contraseña, buscar, correo electrónico, textarea y tel.
Añadiendo marcador de posición al entrada tipos: radio y caja no hará ninguna diferencia.
Marcador de posición y CSS
Además, también es posible diseñar el texto del marcador de posición a través de CSS, pero en el momento de escribir esto todavía está limitado a solo los navegadores Firefox y Webkit.
El siguiente ejemplo muestra cómo cambiamos el texto del marcador de posición a verde tanto en Webkit como en Firefox;
input :: - webkit-input-placeholder color: verde; entrada: -moz-placeholder color: verde;
Sólo para recordar, sin embargo, la :: - webkit-input-placeholder y : -moz-placeholder solo afectará el texto y no puede ser escrito en paralelo.
input :: - webkit-input-placeholder, entrada: -moz-placeholder color: green;
Esta pieza de código no funcionará.
Selector de atributos
CSS3 también vino a apoyar este atributo introduciendo el [marcador de posición] selector de atributos;
input [placeholder] border: 1px solid green;
En el ejemplo anterior, seleccionamos cada entrada que tiene el marcador de posición atribuye y cambia el borde a verde.
Compatibilidad del navegador
Esta nueva característica de HTML5, como es lógico, no es compatible con navegadores antiguos y actualmente solo es totalmente compatible con: Firefox 4+, Chrome 4+, Safari 5+, Opera 11.6 y Internet Explorer 10 (que no ha sido lanzado oficialmente todavía).
Marcadores de posición
Sin embargo, si necesitamos mostrar el marcador de posición en navegadores más antiguos pero aún así podemos utilizar el marcador de posición Atributo, podemos utilizar Polyfills. Hay una gran cantidad de Marcadores de posición por ahí, pero en este ejemplo vamos a utilizar PlaceMe.js;
El PlaceMe.js, Como puede ver en el fragmento de código anterior, depende de jQuery. Ahora, si lo vemos en, por ejemplo, Internet Explorer 9, todas las entradas deben mostrar ahora el texto del marcador de posición.
- Ver demostración
- Descargar fuente
Pensamiento final
los Marcador de posición HTML5 atributo ciertamente hace más fácil agregar texto de marcador de posición. Ahora depende de nosotros, desarrolladores web y diseñadores, elegir qué método usar: JavaScript o HTML5.
Si considera que el uso de Polyfills y jQuery para admitir navegadores antiguos es redundante, entonces, aparentemente, JavaScript es más adecuado para el trabajo. Pero si puede ignorar pacíficamente los navegadores antiguos, entonces usar HTML5 Placeholder es probablemente una mejor manera..
