HTML5 ha realizado muchas mejoras en la forma web, como el nuevo tipo de entrada de entrada, la validación de formulario, etc. El marcador de posición es otro atributo agregado a HTML5. Cuando la entrada o TextAREA establece este atributo, el contenido de este valor se mostrará en el cuadro de texto como un mensaje de palabras grises. Cuando el cuadro de texto gana enfoque, el texto rápido desaparece. En el pasado, para lograr este efecto, JavaScript se usó para controlarlo:
Dado que el marcador de posición es un nuevo atributo, solo unos pocos navegadores lo admiten actualmente. ¿Cómo detectar si el navegador lo admite? (Se puede acceder a más detección de características HTML5/CSS3)
function ha placeHolderUpport () {
devolver 'marcador de posición' en document.createElement ('entrada');
}
El texto de inmediato predeterminado es gris, y el estilo de texto se puede cambiar a través de CSS:
/ * All */::-WebKit-Input-PlaceHolder {Color:#F00; } Entrada: -Moz-PlaceHolder {Color:#F00; } / * individual: webkit * /#field2 ::-webkit-inputplaceholder {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 * /#campo2: -moz-placeholder {color:#00f; }#Field3: -Moz-PlaceHolder {Color:#090; Antecedentes: Lightgreen; Texto-transformación: upcase; }#Field4: -Moz-PlaceHolder {Font-Style: Italic; Decoración de texto: Overline; espaciado de letras: 3px; Color:#999; }Compatible con otros navegadores que no admiten marcador de posición:
VAR PLACELAPEDER = {
_support: (function () {
devolver 'marcador de posición' en document.createElement ('entrada');
}) (),
// El estilo del texto rápido debe definirse en otras ubicaciones en la página
ClassName: 'ABC',
init: function () {
if (! PlaceHolder._support) {
// El Textea no se ha procesado, agregue lo que necesita hacer
Var entradas = document.getElementsByTagName ('input');
Marcador de posición.create (entradas);
}
},
create: function (entradas) {
entrada var;
if (! inputs.length) {
entradas = [entradas];
}
para (var i = 0, longitud = inputs.length; i <longitud; i ++) {
entrada = entradas [i];
if (! PlaceHolder._support && input.attributes && input.attributes.placeholder) {
Marcador de posición._setValue (entrada);
input.AdDeventListener ('Focus', Function (E) {
if (this.value === this.attributes.placeholder.nodevalue) {
this.Value = '';
this.classname = '';
}
}, FALSO);
input.adDeventListener ('blur', function (e) {
if (this.value === '' ') {
Marcador de posición._setValue (this);
}
}, FALSO);
}
}
},
_setValue: function (input) {
input.Value = input.attributes.placeholder.nodeValue;
input.className = PlaceHolder.ClassName;
}
};
// Inicializar todas las entradas cuando la inicialización de la página
//Placeholder.init ();
// o establecer un elemento por separado
//Placeholder.create(Document.getElementByid('t1 '));