2011-11-04 29 views
10

Tôi muốn kiểm tra nếu trình duyệt của những người chạy trang của tôi là khả năng xử lý của html 5 giữ chỗ 'Modernizr chỉ để kiểm tra nhanh?

Tôi biết tôi có thể thêm việc kiểm tra javascript sau:

!Modernizr.input.placeholder 

nhưng nó có giá trị để nhập một thư viện chỉ cho một kiểm tra?

cũng như modernizr làm điều đó cho tôi như thế nào (tôi có nghĩa là nó được triển khai như thế nào dưới trang bìa)?

Trả lời

10

Nếu bạn muốn kiểm tra cho placeholder hỗ trợ, sau đó tất cả những gì bạn cần làm Là;

var placeholderSupport = "placeholder" in document.createElement("input"); 

Và để trả lời câu hỏi khác của bạn; không, hoàn toàn không có điểm bao gồm các thư viện Modernizr toàn bộ cho 1 dòng của JS (Modernizr là 1000 dòng .... đi hình:)) *

* Vâng, không minified, nhưng khái niệm vẫn

+11

Một điểm làm rõ, Modernizr cung cấp nguồn không nén cho mục đích nghiên cứu và phát triển. Modernizr không cung cấp phiên bản rút gọn với mọi thứ trong đó. Bạn được khuyến khích tạo một bản dựng tùy chỉnh. Vì vậy, nó không phải là một oneliner vs so sánh 1000 + lót. –

+9

Ngoài ra Modernizr là một kho lưu trữ các trường hợp cạnh. Ví dụ: hỗ trợ kiểm tra cho loại đầu vào = phạm vi là đầy nguy hiểm. Phát minh các bài kiểm tra tùy chỉnh mỗi lần là một cách hay để kết thúc với một thứ gì đó dễ vỡ như một cú đánh của UA.Mọi người đã thực hiện nó trước khi thử nghiệm đầu vào biểu mẫu HTML5 và tất cả các phát hiện "đơn giản" của họ hiện đã bị hỏng. Disclaimer: Tôi viết Modernizr, rõ ràng. : p –

+3

Để công bằng, Sau khi gzip của nó một sự khác biệt 87 đến 500 byte :) –

3

It's open-source. Go read it.

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(' ')); 
+2

phải thừa nhận rằng, nguồn mà là rất khó để hiểu cho những người không quen với mẹo đó. – SLaks

+0

Người ta có thể gãi đầu nếu người ta chưa từng nhìn thấy thành ngữ '!! ', nhưng thật dễ dàng để có được ý chính của nó, đó là modernizr chỉ kiểm tra xem tài sản tồn tại và không có gì thêm. – mquander

+1

@mquander Mã nguồn đó hơi xa tôi một chút. Tại sao hai dấu chấm than? – Zo72

1

Tìm thấy này: http://davidwalsh.name/html5-placeholder

Code:

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

Ngoài ra còn có một giải pháp dự phòng, bằng cách nhấn vào liên kết

Các vấn đề liên quan