Trình giữ chỗ không hoạt động

Question

Trình giữ chỗ không hoạt động trong IE-9, vì vậy tôi đã sử dụng mã bên dưới để giữ chỗ.

jQuery(function() { 
    debugger; 
    jQuery.support.placeholder = false; 
    test = document.createElement('input'); 
    if ('placeholder' in test) jQuery.support.placeholder = true; 
}); 
// This adds placeholder support to browsers that wouldn't otherwise support it. 
$(function() { 

    if (!$.support.placeholder) { 
     var active = document.activeElement; 
     $(':text').focus(function() { 
      if ($(this).attr('placeholder') != '' && $(this).val() == $(this).attr('placeholder')) { 
       $(this).val('').removeClass('hasPlaceholder'); 
      } 
     }).blur(function() { 
      if ($(this).attr('placeholder') != '' && ($(this).val() == '' || $(this).val() == $(this).attr('placeholder'))) { 
       $(this).val($(this).attr('placeholder')).addClass('hasPlaceholder'); 
      } 
     }); 
     $(':text').blur(); 
     $(active).focus(); 
     $('form:eq(0)').submit(function() { 
      $(':text.hasPlaceholder').val(''); 
     }); 
    } 
}); 

Khi tôi lấy giá trị của kiểm tra, nó cho thấy null.How tôi có thể nhận được các chi tiết của tất cả các thẻ đầu vào?

Answer 1

Tôi nghĩ rằng điều này sẽ giúp bạn giữ thuộc tính

if ($.browser.msie) { 
        $("input").each(function() { 
         if (IsNull($(this).val()) && $(this).attr("placeholder") != "") { 
          $(this).val($(this).attr("placeholder")).addClass('hasPlaceHolder'); 
          $(this).keypress(function() { 
           if ($(this).hasClass('hasPlaceHolder')) $(this).val("").removeClass('hasPlaceHolder'); 
          }); 
          $(this).blur(function() { 
           if ($(this).val() == "") $(this).val($(this).attr("placeholder")).addClass('hasPlaceHolder'); 
          }); 
         } 
        }); 
       } 

Answer 2

HTML:

<input type='text' id='your_field' value='Enter value'/> 

jQuery:

$(document).ready(function(){ 
    $("#your_field").on('focusout',function(){ 
     if($("#your_field").val() == ''){ 
      $("#your_field").val('Enter value'); 
     } 
    }); 
    $("#your_field").on('focus',function(){ 
     if($("#your_field").val() == 'Enter value'){ 
      $("#your_field").val(''); 
     } 
    }); 
}); 

Xem DEMO

Ngoài ra kiểm tra khi biểu mẫu được đăng tải bởi vì nếu người dùng gửi các hình thức mà không cần nhập lĩnh vực này sau đó Enter value sẽ được đăng dưới dạng giá trị của trường. Do đó, hãy xác thực ở phía máy khách hoặc kiểm tra ở phía máy chủ khi gửi biểu mẫu.

Answer 3

Tôi đang trên điện thoại di động của tôi vì vậy đây là khó khăn nhưng thực sự bạn cần làm

JQuery.support.placeholder = typeof 'placeholder' in test !== 'undefined' 

Bởi vì vô nghĩa không có bất kỳ giá trị giữ chỗ, nhưng có giữ chỗ hỗ trợ

Từ những gì tôi hiểu rằng bạn đang nói rằng trình giữ chỗ trong thử nghiệm đang trả về giá trị rỗng

Answer 4

Tôi khuyên bạn không nên tự mình viết và thực hiện giải pháp không có giá. Có nhiều sự phức tạp ở đây mà bạn có thể muốn tự giải quyết nếu tất cả những gì bạn muốn là cung cấp hỗ trợ cho các trình duyệt cũ hơn.

Ví dụ, đây là shim Tôi đang sử dụng (và được khuyến cáo trên http://html5please.com): https://github.com/mathiasbynens/jquery-placeholder/blob/master/jquery.placeholder.js

Đi trước và đọc mã. Đây là một số vấn đề bạn cần phải có trong tâm trí khi viết shim ví dụ:

• phát hiện các hỗ trợ trình duyệt,
• theo dõi khi hộp chứa đầu vào thật hay không;
• thêm một lớp để cho phép màu chữ khác nhau cho các placeholder,
• rõ ràng giữ chỗ trước khi nộp mẫu đơn,
• rõ ràng giữ chỗ khi tải lại trang,
• xử lý textarea,
• xử lý input[type=password]

Và đó có thể không phải là tất cả. (Thư viện tôi đã liên kết cũng móc vào jQuery để làm .val() trở '' khi không có đầu vào thực sự trong hộp

---

Ngoài ra còn có một shim có sử dụng một cách tiếp cận hoàn toàn khác nhau:. https://github.com/parndt/jquery-html5-placeholder-shim/blob/master/jquery.html5-placeholder-shim.js

Thư viện này không chạm vào giá trị thực của đầu vào, mà thay vào đó hiển thị phần tử trực tiếp trên nó.