javascript - twingo - ¿Manera simple de verificar si el marcador de posición es compatible?
flotador bomba de gasolina (9)
Deseo utilizar el atributo "placeholder" HTML5 en mi código si el navegador del usuario lo admite; de lo contrario, simplemente imprima el nombre del campo en la parte superior del formulario. Pero solo quiero comprobar si el marcador de posición es compatible y no qué versión / nombre de navegador utiliza el usuario.
Entonces, idealmente, me gustaría hacer algo como
<body>
<script>
if (placeholderIsNotSupported) {
<b>Username</b>;
}
</script>
<input type = "text" placeholder ="Username">
</body>
Excepto que no estoy seguro del bit javascript. ¡Ayuda es apreciada!
Hola, esta es una vieja pregunta, pero espero que esto ayude a alguien.
Este script verificará la compatibilidad de los marcadores de posición en su navegador, y si no es compatible, hará que todos los campos de entrada con un marcador de posición usen el campo value = "". Tenga en cuenta que cuando se envía el formulario, también cambiará su entrada a "" si no se ingresó nada.
// Add support for placeholders in all browsers
var testInput = document.createElement(''input'');
testPlaceholderCompatibility = (''placeholder'' in testInput);
if (testPlaceholderCompatibility === false)
{
$(''[placeholder]'').load(function(){
var input = $(this);
if (input.val() == '''')
{
input.addClass(''placeholder'');
input.val(input.attr(''placeholder''));
}
});
$(''[placeholder]'').focus(function() {
var input = $(this);
if (input.val() == input.attr(''placeholder'')) {
input.val('''');
input.removeClass(''placeholder'');
}
}).blur(function() {
var input = $(this);
if (input.val() == '''' || input.val() == input.attr(''placeholder'')) {
input.addClass(''placeholder'');
input.val(input.attr(''placeholder''));
}
}).blur().parents(''form'').submit(function() {
$(this).find(''[placeholder]'').each(function() {
var input = $(this);
if (input.val() == input.attr(''placeholder'')) {
input.val('''');
}
})
});
}
Intento hacer lo mismo ... aquí escribí esto
if(!(''placeholder''in document.createElement("input"))){
//... document.getElementById("element"). <-- rest of the code
}}
Con esto, debes tener una identificación para identificar el elemento con el marcador de posición ... No sé si esto también te ayuda a identificar el elemento SÓLO cuando el marcador de posición no es compatible.
NOTA: El marcador de posición NO funciona en Internet Explorer de alguna manera, debería funcionar .
document.createElement("input").placeholder == undefined
No funciona en Internet Explorer 11 - document.createElement ("input"). Marcador de posición return string vacío
var testInput = document.createElement(''input'');
testPlaceholderCompatibility = (''placeholder'' in testInput);
No funciona en Internet Explorer 11 - devuelve verdadero
''placeholder''in document.createElement("input")
No funciona en Internet Explorer 11 - devuelve verdadero
En teoría, se supone que Internet Explorer 11 es compatible con el marcador de posición, pero de hecho, cuando se ingresa, el marcador de posición del foco desaparece. En marcador de posición de Chrome se muestra hasta que realmente escribe algo, sin importar el foco. Por lo tanto, la detección de características no funciona en este caso; es necesario detectar IE y mostrar etiquetas.
O solo:
if (document.createElement("input").placeholder == undefined) {
// Placeholder is not supported
}
Otra forma sin hacer un elemento de entrada en la memoria que debe ser GC''d:
if (''placeholder'' in HTMLInputElement.prototype) {
...
}
Si está utilizando Modernizr, captura rápida siguiente:
if(!Modernizr.input.placeholder){
...
}
Un poco tarde para la fiesta, pero si está utilizando jQuery o AngularJS, puede simplificar el método sugerido anteriormente sin usar ningún complemento.
jQuery
typeof $(''<input>'')[0].placeholder == ''string''
AngularJS
typeof angular.element(''<input>'')[0].placeholder == ''string''
Los controles son muy similares, ya que AngularJS ejecuta jQlite bajo el capó.
http://html5tutorial.info/html5-placeholder.php tiene el código para hacerlo.
Si ya usas jQuery, en realidad no necesitas hacer esto. Hay complementos de marcador de posición disponibles ( http://plugins.jquery.com/plugin-tags/placeholder ) que usarán el atributo HTML5 siempre que sea posible, y Javascript para simularlo si no es así.
function placeholderIsSupported() {
var test = document.createElement(''input'');
return (''placeholder'' in test);
}
Usé una versión jQuery -ized como punto de partida. (Solo dando crédito donde es debido)