Comentario: El navegador ha introducido muchas características HTML5. Uno de mis favoritos es presentar el atributo de marcador de posición para el elemento de entrada. El atributo de marcador de posición muestra el texto de la guía hasta que el cuadro de entrada obtiene el enfoque de entrada. Cuando el usuario ingresa el contenido, el contenido de la guía se ocultará automáticamente.
Dirección original: atributo de marcador de posición de HTML5Dirección de demostración: marcador de posición
Fecha original: 9 de agosto de 2010
Fecha de traducción: 6 de agosto de 2013
El navegador presenta muchas características de HTML5: algunas se basan en HTML, algunas están en forma de API de JavaScript, pero todas son muy útiles. Uno de mis favoritos es la introducción del atributo de marcador de posición para el elemento de entrada.
La propiedad del marcador de posición muestra el texto de la guía hasta que el cuadro de entrada obtenga el enfoque de entrada. Cuando el usuario ingresa el contenido, el contenido de la guía se ocultará automáticamente. Definitivamente ha visto esta técnica implementada en JavaScript miles de veces, pero el soporte nativo de HTML5 es generalmente mejor.
El código HTML es el siguiente:
<input type = "text" placeHOLDER = "Ingrese la dirección permanente ...">
Todo lo que tiene que hacer es agregar un dominio de marcador de posición y algún contenido de texto guiado, y no necesita scripts de JavaScript adicionales para lograr este efecto. ¿No es genial?
Soporte de marcador de posición de prueba
(Tenga en cuenta que este es un artículo de 2010. Hasta ahora, en 2013, los navegadores convencionales deberían haberlo apoyado).
Dado que el marcador de posición es una característica nueva, es necesario probar el soporte del navegador. El código JS es el siguiente:
// crear un elemento de entrada en JS y determinar si el elemento tiene un atributo llamado marcador de posición
// Si el navegador lo admite, esta propiedad existirá en el DOM referenciado en JS
function ha placeHolderUpport () {
var input = document.createElement ('entrada');
retorno ('marcador de posición' en entrada);
}
Si el navegador no admite la función de marcador de posición, necesita una estrategia de respuesta para manejarla, como Mootols, Dojo u otras herramientas de JavaScript. (Ahora el dojo se puede usar menos, y más en China son jQuery y extjs).
/* El código jQuery, por supuesto, recuerde presentar la biblioteca jQuery*/
$ (function () {
if (! HausplaceHolderUpport ()) {
// Obtener el elemento de dirección
var $ dirección = $ ("input [name = 'dirección']");
marcador de posición = $ dirección.attr ("marcador de posición");
// Evento de enfoque de enlace
$ dirección.bind ('foco', function () {
if (placeHolder == $ direcciones.val ()) {
$ direcciones.val ('');
}
});
// Evento de foco perdido
$ dirección.bind ('blur', function () {
if ('' '== $ dirección.val ()) {
$ dirección.val (marcador de posición);
}
});
}
});
El marcador de posición es otra gran propiedad adicional para que el navegador reemplace los fragmentos JS, incluso puede editar el estilo de marcador de posición de HTML5.
Todos los códigos son los siguientes:
<! Doctype html>
<html>
<Evista>
<title> HTML5 Demostración de atributos de marcador de posición </title>
<meta content = "editplus">
<meta content = "[email protected]">
<meta content = "original = http: //davidwalsh.name/html5-placeholder">
<script src = "http://code.jquery.com/jquery-1.7.1.min.js"> </script>
<script>
// crear un elemento de entrada en JS y determinar si el elemento tiene un atributo llamado marcador de posición
// Si el navegador lo admite, esta propiedad existirá en el DOM referenciado en JS
function ha placeHolderUpport () {
var input = document.createElement ('entrada');
retorno ('marcador de posición' en entrada);
}
/* El código jQuery, por supuesto, recuerde presentar la biblioteca jQuery*/
$ (function () {
if (! HausplaceHolderUpport ()) {
// Obtener el elemento de dirección
var $ dirección = $ ("input [name = 'dirección']");
marcador de posición = $ dirección.attr ("marcador de posición");
// Evento de enfoque de enlace
$ dirección.bind ('foco', function () {
if (placeHolder == $ direcciones.val ()) {
$ direcciones.val ('');
}
});
// Evento de foco perdido
$ dirección.bind ('blur', function () {
if ('' '== $ dirección.val ()) {
$ dirección.val (marcador de posición);
}
});
}
});
</script>
</ablo>
<Body>
<div>
<Form Method = "Post" Action = "">
<input type = "text" placeHOLDER = "Ingrese la dirección permanente ...">
<input type = "enviar" value = "test">
</form>
</div>
</body>
</html>