Comentario: Se han introducido muchas nuevas características interesantes en HTML5; Algunos se reflejan en HTML, algunas son API de JavaScript, todas las cuales son muy útiles. Una de mis características favoritas es la propiedad de marcador de posición en el cuadro de texto (entrada).
La propiedad del marcador de posición le permite mostrar información de inmediato en el cuadro de texto. Una vez que ingrese cualquier información en el cuadro de texto, la información de solicitud se ocultará. Es posible que haya visto este efecto innumerables veces antes, pero la mayoría de ellos se implementan en JavaScript, y ahora HTML5 proporciona soporte nativo y funciona mejor.
Código HTML
También ha visto que todo lo que necesita hacer es agregar el atributo de marcador de posición a la etiqueta de declaración del cuadro de texto. JavaScript no es necesario en absoluto para crear este efecto.
Verifique si el navegador admite el atributo de marcador de posición
Debido a que el marcador de posición es una nueva propiedad, es muy necesario verificar si su navegador lo admite. Por ejemplo, IE6 e IE8 definitivamente no son compatibles:
function ha placeHolderUpport () {
var input = document.createElement ('entrada');
retorno ('marcador de posición' en entrada);
}
Si el navegador del usuario no admite la función de marcador de posición, debe usar Mootols, Dojo u otras herramientas de JavaScript para implementarla:
/* Mootols FTW! */
var firstNameBox = $ ('First_Name'),
mensaje = FirstNameBox.get ('Posición de posicionador');
FirstNameBox.addevents ({
foco: functer () {
if (firstNameBox.Value == Mensaje) {Searchbox.value = ''; }
},
Blur: function () {
if (firstNameBox.Value == '') {searchbox.value = mensaje; }
}
});
Embellece el marcador de posición con CSS
Durante la investigación adicional, descubrí otra característica interesante de CSS: CSS embellecimiento del efecto de marcador de posición de entrada. Permítanme usar el código CSS simple para embellecer el texto del marcador de posición en el cuadro de texto.
Código CSS
El uso en el navegador Firefox es diferente del de Google Chrome. Sus nombres son fáciles de entender:
/* todo */
::-WebKit-Input-placeholder {color:#f00; }
::-moz-placeholder {color:#f00; } / * Firefox 19+ * /
: -MS-InputPlaceholder {Color:#F00; } /* es decir */
entrada: -Moz-PlaceHolder {Color:#F00; }
/ * individual: webkit */
#Field2 ::-WebKit-Input-PlaceHolder {Color:#00f; }
#Field3 ::-WebKit-Input-PlaceHolder {Color:#090; Antecedentes: Lightgreen; Texto-transformación: upcase; }
#Field4 ::-WebKit-Input-PlaceHolder {Font-Style: Italic; Decoración de texto: Overline; espaciado de letras: 3px; Color:#999; }
/ * Individual: Mozilla */
#Field2 ::-Moz-PlaceHolder {Color:#00f; }
#Field3 ::-Moz-PlaceHolder {Color:#090; Antecedentes: Lightgreen; Texto-transformación: upcase; }
#Field4 ::-Moz-Placeholder {Font-Style: Cursalic; Decoración de texto: Overline; espaciado de letras: 3px; Color:#999; }
Puede controlar la fuente, el color y el estilo del texto del marcador de posición. Incluso puede mostrar el marcador de posición del cuadro de texto de manera animada. Embellecer sus cuadros de texto es algo que se ve pequeño, pero para algunos sitios web interactivos, la clave del éxito radica en los detalles. Ahora, IE10 solo es compatible con el marcador de posición. Creo que cada vez más personas usarán este efecto nativo de marcador de posición.