Una de mis piezas nuevas favoritas en HTML5 es la capacidad de agregar texto de marcador de posición 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 empiecen a escribir en el campo input, este texto desaparecerá.
en los viejos tiempos, Comúnmente hacemos esto con JavaScript, de la siguiente manera;
no hay nada malo con esta práctica, pero es más fácil en HTML5.,
HTML5 introduced a new attribute with a logical name; placeholder., Aquí hay un ejemplo:
<input type="text" placeholder="Placeholder Text">
si lo vemos en los navegadores, la entrada debe tener el texto gris, como se ve a continuación;
algunas cosas que deben tenerse en cuenta: de acuerdo con la especificación, el atributo placeholder no debe usarse como alternativa a un label y también se sugiere que este atributo solo se aplique a los tipos input que requieren texto, p. ej., text, password, search, email, textarea y tel.
Agregar placeholder para el input tipo: radio y checkbox no hará ninguna diferencia.
Placeholder& CSS
Además, el estilo del texto del marcador de posición a través de CSS también es posible, 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: green;}input:-moz-placeholder {color: green;}
solo para recordar sin embargo, ::-webkit-input-placeholder y :-moz-placeholder solo afectarán al texto y no se pueden escribir en paralelo.
input::-webkit-input-placeholder, input:-moz-placeholder {color: green;}
Este código no funcionará.,
Attribute Selector
CSS3 también llegó a admitir este atributo introduciendo el attribute selector;
input {border: 1px solid green;}
en el ejemplo anterior, seleccionamos cadainput que tenga elplaceholder atributo y cambiar el borde a verde.,
compatibilidad con navegadores
esta nueva función HTML5 no es compatible con navegadores antiguos y actualmente solo es totalmente compatible con: Firefox 4+, Chrome 4+, Safari 5+, Opera 11.6 e Internet Explorer 10 (que aún no ha sido lanzado oficialmente).
marcador de posición Polyfills
Sin embargo, si necesitamos mostrar el marcador de posición en navegadores antiguos pero aún así poder usar el atributo placeholder, podemos usar Polyfills., Hay un montón de marcadores de posición Polyfills por ahí, pero en este ejemplo vamos a utilizar el PlaceMe.js;
<script src="https://www.hongkiat.com/blog/html5-placeholder/amp/jquery.js" type="text/javascript"></script><script src="https://www.hongkiat.com/blog/html5-placeholder/amp/placeme.js" type="text/javascript"></script>
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 toda la entrada debería mostrar el texto del marcador de posición.
- Ver Demo
- Descargar fuente
pensamiento Final
el atributo de marcador de posición HTML5 ciertamente facilita la adición de texto de marcador de posición., Ahora depende de Nosotros, desarrolladores y diseñadores web, elegir qué método usar: JavaScript o HTML5.
si considera que usar Polyfills y jQuery para soportar navegadores antiguos es redundante, entonces JavaScript es aparentemente más adecuado para el trabajo. Pero si puede ignorar pacíficamente los navegadores antiguos, entonces usar el marcador de posición HTML5 es probablemente una mejor manera.