Cómo comprobar si el navegador es compatible con el atributo marcador de posición de origen?

Question

Estoy tratando de escribir un simple marcador de posición plugin de jQuery para un sitio de la mina, pero, por supuesto, sólo quiero disparar la función de marcador de posición si el atributo nativo no es compatible ...

¿Cómo puedo utilizar jQuery para comprobar la compatibilidad nativa del atributo marcador de posición?

Answer 1

Se puede añadir a $.support con bastante facilidad mediante la inserción de este en la parte superior de la javascript han escrito:

jQuery.support.placeholder = (function(){
    var i = document.createElement('input');
    return 'placeholder' in i;
})();

A continuación, puede utilizar cualquiera $.support.placeholder o jQuery.support.placeholder cualquier parte del código.

NB Este código adaptado de diveintohtml5 , el enlace proporcionado por hellvinz anteriormente.

Answer 2

El uso de la biblioteca Modernizr, que se puede encontrar aquí: http://www.modernizr.com/

Y a continuación, haga lo siguiente:

if (Modernizr.input.placeholder) {
  // your placeholder text should already be visible!
} else {
  // no placeholder support :(
  // fall back to a scripted solution
}

Modernizr es realmente útil para probar el apoyo del navegador para casi todas las funciones de HTML5.

Answer 3

Me gusta tener una clase tan simple ...

var Browser = {
  Can: {
    Placeholder: function () {
      return 'placeholder' in document.createElement('input'); 
    }
  }
}

... para que pueda comprobar fácilmente si su navegador es compatible con el atributo marcador de posición.

if (Browser.Can.Placeholder()) {

}

Answer 4

Existe la propiedad placeholder en DOM objetos INPUT en todos los navegadores, independientemente de si o no el atributo marcador de posición se ha definido en el elemento de entrada HTML.

La forma correcta es:

var Modernizr = {};
// Create the input element for various Web Forms feature tests.
var inputElem = document.createElement('input'), attrs = {};    
Modernizr.input = (function(props) {
    for(var i = 0, len = props.length; i < len; i++) {
        attrs[props[i]] = props[i] in inputElem;
    }
    return attrs;
})('autocomplete autofocus list placeholder max min multiple pattern required step'.split(' '));

if(!Modernizr.input.placeholder) {
    // Do something.
}