Trình giữ chỗ HTML5 IE9 - làm cách nào để mọi người đạt được điều này?

Question

Tôi đang cố gắng sử dụng thuộc tính placeholder="xxx" trong ứng dụng web của mình và tôi không muốn có một hình ảnh đặc biệt cho IE9. Mọi người có thể đưa ra một số gợi ý tốt để đạt được chức năng này trong IE9 không?

Tôi đã tìm thấy một vài liên kết ở đây nhưng không có tập lệnh được đề xuất nào đủ ... và câu trả lời là từ giữa năm 2011, vì vậy tôi nghĩ có thể có giải pháp tốt hơn. Có lẽ với một plugin jQuery được chấp nhận rộng rãi? Tôi không muốn sử dụng bất cứ điều gì đòi hỏi mã xâm nhập như yêu cầu một lớp css nhất định hoặc một cái gì đó.

Cảm ơn.

EDIT - Tôi cũng cần điều này để làm việc cho các trường nhập mật khẩu.

// the below snippet should work, but isn't. 
$(document).ready(function() { 
    initPlaceholders()(); 
} 

function initPlaceholders() { 
     $.support.placeholder = false; 
var test = document.createElement('input'); 
if ('placeholder' in test) { 
    $.support.placeholder = true; 
    return function() { } 
} else { 
    return function() { 
     $(function() { 
      var active = document.activeElement; 
      $('form').delegate(':text, :password', 'focus', function() { 
       var _placeholder = $(this).attr('placeholder'), 
        _val = $(this).val(); 
       if (_placeholder != '' && _val == _placeholder) { 
        $(this).val('').removeClass('hasPlaceholder'); 
       } 
      }).delegate(':text, :password', 'blur', function() { 
       var _placeholder = $(this).attr('placeholder'), 
        _val = $(this).val(); 
       if (_placeholder != '' && (_val == '' || _val == _placeholder)) { 
        $(this).val(_placeholder).addClass('hasPlaceholder'); 
       } 
      }).submit(function() { 
       $(this).find('.hasPlaceholder').each(function() { $(this).val(''); }); 
      }); 
      $(':text, :password').blur(); 
      $(active).focus(); 
     }); 
    } 
} 
} 

Answer 1

Chúng tôi vừa nghiên cứu tương tự. Chúng tôi quyết định sử dụng lại this gist, trước Aaron McCall, sau khi thực hiện một số thay đổi nhỏ. Ưu điểm chính là nó đơn giản, dễ hiểu mã:

1. Tháo các bộ phận hạt nhân và setup_placeholders. Chỉ cần gọi ngay lập tức trong một chức năng ẩn danh.

2. Thêm var trước test.

Đối với các trình duyệt hỗ trợ placeholder, nó chỉ đơn giản quay trở lại điều đó. Nó cũng xử lý các yếu tố đầu vào mới (lưu ý việc sử dụng delegate) trong các biểu mẫu hiện có. Nhưng không xử lý các phần tử biểu mẫu động mới. Nó có thể có thể được sửa đổi để làm như vậy với jQuery.on.

Nếu bạn không thích cái này, bạn có thể sử dụng một trong số here. Tuy nhiên, một số trong số đó là quá phức tạp, hoặc có các quyết định thiết kế có vấn đề như setTimeout để phát hiện các yếu tố mới.

Lưu ý rằng nó cần phải sử dụng hai cặp dấu ngoặc, kể từ khi bạn đang gọi điện thoại một chức năng ẩn danh, sau đó gọi hàm trả lại (điều này có thể là yếu tố ra khác nhau):

(function() { 
    // ... 
})()(); 

Answer 2

Dưới đây là một plugin jQuery rằng cũng hoạt động với các trường mật khẩu. Nó không phải là nhỏ như mã được đề xuất bởi Matthew nhưng nó có một vài sửa chữa trong đó. Tôi đã sử dụng thành công này cùng với H5Validate là tốt.

http://webcloud.se/code/jQuery-Placeholder/

Answer 3

Tôi đã viết một jQuery plugin một thời gian lại có thêm sự hỗ trợ giữ chỗ cho bất kỳ trình duyệt không hỗ trợ nó và không có gì trong những người mà làm.

Placeholder Plugin