cách sử dụng thuộc tính giữ chỗ HTML5 với tính tương thích ngược?

Question

Tôi muốn sử dụng thuộc tính giữ chỗ của HTML5 (Bạn có thể thấy nó trong cation trong bản tin tại Thought Results). Nhưng khi tôi sử dụng các trình duyệt cũ hơn, tất nhiên, chúng không hiển thị bất cứ thứ gì. Tôi có thể sử dụng JavaScript để bắt chước nó, nhưng sau đó, tôi không nên sử dụng nó và nó được thực hiện theo cách cũ. Làm thế nào tôi có thể có cả thuộc tính giữ chỗ HTML5 và đồng thời mô phỏng nó cho các trình duyệt cũ hơn?

Answer 1

Bạn có thể phát hiện nếu một trình duyệt hỗ trợ các thuộc tính:

http://diveintohtml5.info/detect.html#input-placeholder

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

Nếu có, không làm gì cả. Nếu không, bạn có thể sử dụng JS để lấy giá trị giữ chỗ và chèn nó vào trường như bạn thấy phù hợp (có thể là giá trị mặc định) và sau đó thêm các tương tác thích hợp để mô phỏng hành vi giữ chỗ HTML5.

Answer 2

@marcgg đã viết một plugin trình giữ chỗ JQuery tuyệt vời về cơ bản sao chép chức năng trình giữ chỗ cho các trình duyệt không hỗ trợ nó.

https://github.com/marcgg/Simple-Placeholder

Tôi đã tìm kiếm thông qua rất nhiều các plugin giữ chỗ trước khi quyết định này và nó hoạt động tốt cho đến nay. Nguyên tìm thấy nó trong đối phó với câu hỏi tương tự này:

https://stackoverflow.com/questions/5120257/what-is-the-best-html5-placeholder-like-jquery-plugin-out-there

Answer 3

tôi khuyên bạn nên sử dụng Modernizr để phát hiện tính năng này.

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

Nếu bạn không muốn sử dụng thư viện này, bạn có thể sử dụng mã sau đây.

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

Về dự phòng hỗ trợ, nếu bạn đang sử dụng jQuery bạn có thể sử dụng Simple Placeholder, trong đó có nguồn gốc của nó ở đây tại StackOverflow.