Cách kiểm tra xem trình duyệt có hỗ trợ thuộc tính giữ chỗ gốc không?

Question

Tôi đang cố gắng viết một trình cắm thêm giữ chỗ jQuery đơn giản cho một trang web của tôi nhưng tất nhiên tôi chỉ muốn kích hoạt chức năng nếu thuộc tính giữ chỗ gốc không được hỗ trợ…

Làm cách nào tôi có thể sử dụng jQuery để kiểm tra cho hỗ trợ gốc của thuộc tính trình giữ chỗ?

Answer 1

Bạn có thể thêm vào $.support khá dễ dàng bằng cách chèn này ở phía trên cùng của javascript bạn đã viết:

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

Sau đó bạn có thể sử dụng một trong hai $.support.placeholder hoặc jQuery.support.placeholder bất cứ nơi nào trong mã của bạn.

NB Mã này được điều chỉnh từ diveintohtml5, liên kết được cung cấp bởi hellvinz ở trên.

Answer 2

Sử dụng các thư viện Modernizr, mà bạn có thể tìm thấy ở đây: http://www.modernizr.com/

Và sau đó làm điều này:

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

Modernizr thực sự tiện dụng để thử nghiệm hỗ trợ của trình duyệt cho hầu hết các chức năng HTML5.

Answer 3

Thuộc tính placeholder tồn tại trên các đối tượng DOM INPUT trong tất cả các trình duyệt bất kể thuộc tính giữ chỗ đã được xác định trên phần tử HTML INPUT hay chưa.

Cách đúng là:

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

Tôi thích có một lớp đơn giản như vậy ...

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

... để bạn có thể dễ dàng kiểm tra nếu trình duyệt của bạn hỗ trợ các thuộc tính placeholder.

if (Browser.Can.Placeholder()) { 

}