Come verificare se il browser supporta l'attributo placeholder nativo?

Question

Sto cercando di scrivere un semplice segnaposto plugin jQuery per un sito di mine, ma ovviamente ho solo voglia di sparare la funzione se l'attributo nativo segnaposto non è supportato ...

Come posso utilizzare jQuery per testare per supporto nativo dell'attributo segnaposto?

Answer 1

è possibile aggiungere al $.support abbastanza facilmente inserendo questo nella parte superiore del Javascript che hai scritto:

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

È quindi possibile utilizzare sia $.support.placeholder o jQuery.support.placeholder qualsiasi punto del codice.

NB Questo codice è stato adattato da diveintohtml5, il collegamento fornito da Hellvinz sopra.

Answer 2

utilizzare la libreria Modernizr, che potete trovare qui: http://www.modernizr.com/

e poi fare questo:

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

Modernizr è davvero a portata di mano per testare il supporto del browser per quasi tutte le funzionalità HTML5.

Answer 3

La proprietà placeholder esiste negli oggetti DOM INPUT in tutti i browser indipendentemente dal fatto che l'attributo segnaposto sia stato definito sull'elemento HTML INPUT.

Il modo corretto è:

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. 
} 

Answer 4

mi piace avere una classe così semplice ...

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

... in modo da poter facilmente controllare se il browser supporta l'attributo segnaposto.

if (Browser.Can.Placeholder()) { 

}