Thuộc tính trình giữ chỗ không được hỗ trợ trong IE. Bất kỳ đề xuất?

Tất cả những gì bạn sử dụng để hỗ trợ các thuộc tính giữ chỗ trong trình duyệt?Thuộc tính trình giữ chỗ không được hỗ trợ trong IE. Bất kỳ đề xuất?

Hiện nay, đang sử dụng:

https://github.com/mathiasbynens/Placeholder-jQuery-Plugin

cũng đã thử plugin này không có kết quả:

https://github.com/danbentley/placeholder

Nhưng nó dường như không làm việc với IE ... More cụ thể IE 8. Bất kỳ đề xuất/lựa chọn thay thế nào khác?

Tôi có nên quên thuộc tính giữ chỗ ngay bây giờ không?

Nguồn

2011-10-14 Christian Fazzini

Nếu hỗ trợ IE8 là cơ bản thì, có, bạn nên quên các tính năng không hỗ trợ. Nếu trình giữ chỗ sẽ tốt cho người dùng của bạn nhưng không phải là cơ bản thì hãy sử dụng chúng và đừng lo lắng về IE8. – robertc

Nếu chúng là cơ bản, thì bạn đang sử dụng chúng sai. Một gợi ý không bao giờ là một yêu cầu thiết yếu để hiểu đầu vào. – Quentin

Bạn đã có thể tìm ra giải pháp cho việc này chưa? – learning

Bạn nói đúng là IE8 không hỗ trợ thuộc tính placeholder. placeholder là một phần của đặc tả HTML5 và IE8 được phát hành một thời gian dài trước khi HTML5 được nghĩ tới. Cách tốt nhất để giải quyết nó một cách liền mạch là sử dụng công cụ như Modernizr để phát hiện xem trình duyệt có hỗ trợ tính năng trình giữ chỗ hay không và chạy tập lệnh chèn nhiều JS nếu nó không được hỗ trợ.

if(!Modernizr.input.placeholder) { 
    //insert placeholder polyfill script here. 
}

Có rất nhiều tập lệnh chèn lấp nhiều chỗ dành sẵn để tải xuống. Hãy chọn một thuộc tính sử dụng thuộc tính placeholder để bạn chỉ cần xác định chuỗi trình giữ chỗ ở một nơi cho tất cả các trình duyệt. Đây là một trong những bạn có thể thử: http://www.hagenburger.net/BLOG/HTML5-Input-Placeholder-Fix-With-jQuery.html

Hy vọng điều đó sẽ hữu ích.

Nguồn

2011-10-14 13:22:03 Spudley

Vấn đề ở đây là, ngay cả các kịch bản lệnh chèn lấp JS dường như không hoạt động với IE –

+1 để tham chiếu liên kết. –

Một tài nguyên khác, có danh sách các liên kết trong phần 'trình giữ chỗ': https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills –

Đây là những gì tôi đã sử dụng trong một trong các dự án của mình. Điều duy nhất là tôi chỉ cần một trình giữ chỗ trên một phần tử, vì vậy nó có thể không hoạt động cho tình huống của bạn ngay lập tức. Nhưng chỉ để có ý tưởng về mã đơn giản như thế nào:

(function(){ 
    var nameInput = document.getElementById('your-id-here'); 
    var placeHolderSupport = ("placeholder" in document.createElement("input")); 
    if(!placeHolderSupport) 
    { 
     //show hint in gray 
     var placeholder = nameInput.getAttribute('placeholder'); 
     nameInput.onfocus = function(){ if(this.value==placeholder){this.value='';this.className='';} }; 
     nameInput.onblur = function(){ if(this.value==''){this.value=placeholder;this.className='placeholder';} }; 
     nameInput.onblur(); 
    } 
})()

Nguồn

2011-10-14 12:55:33 Gerben

Trên thực tế, không có phiên bản nào của IE vào ngày 19 tháng 10 năm 2011 hỗ trợ thuộc tính trình giữ chỗ. Tôi đã thử nghiệm nó trong 7, 8, và 9 và không ai trong số họ dường như nhận ra nó. Bạn sẽ nghĩ rằng ie9, nhìn thấy như thế nào nó nghĩa vụ phải hỗ trợ css3 và html5 sẽ có cố định này, nhưng nó không xuất hiện như vậy.

Là một workaround đơn giản đó không phải là đẹp, nhưng được công việc làm bạn có thể sử dụng một số javascript như thế này:

<input type="text" value="Enter ZIP" 
    onfocus="if(this.value == 'Enter ZIP'){this.value = '';}" />

Nguồn

2011-10-19 17:02:08 weexpectedTHIS

Điều đó sẽ không trả lại giá trị 'onblur' – gdoron

Có khá một vài kịch bản polyfill cho thuộc tính placeholder. Đây là one that seems to work well.

Chỉ cần nhớ gọi số $('input, textarea').placeholder(); trong mã JS của bạn và có thể thêm quy tắc CSS, ví dụ: .placeholder { color: #aaa }.

Nguồn

2011-11-06 18:46:07 tuomassalo

Đây là mã ngay từ dự án của tôi hoạt động nguyên gốc trong chrome và sử dụng polyfill trong IE8 ... có một cảnh báo tại đây để kiểm tra cho biết khi nào polyfill đang được gọi. Bạn cần modernizr tải như là một điều kiện tiên quyết để sử dụng mã này nhưng một kịch bản đơn giản bao gồm trong phần <head> của bạn sẽ làm.

<script type="text/javascript"> 
    $('document').ready(function() { 
     if (!Modernizr.input.placeholder) { 
      $('[placeholder]').focus(function() { 
       var input = $(this); 
       if (input.val() == input.attr('placeholder')) { 
        input.val(''); 
        input.removeClass('placeholder'); 
       } 
      }).blur(function() { 
       var input = $(this); 
       if (input.val() == '' || input.val() == input.attr('placeholder')) { 
        input.addClass('placeholder'); 
        input.val(input.attr('placeholder')); 
        } 
      }).blur(); 

      $('[placeholder]').parents('form').submit(function() { 
       $(this).find('[placeholder]').each(function() { 
        var input = $(this); 
        if (input.val() == input.attr('placeholder')) { 
         input.val(''); 
        } 
       }) 
      }); 

      alert("no place holders"); 
     } 
    }); 
</script>

Nguồn

2012-12-20 19:49:30

Điều này sẽ gây ra vấn đề nếu chúng ta sử dụng giá trị giữ chỗ trong javascript. Chúng tôi sẽ nhận được văn bản thay vì các chuỗi rỗng thực tế có nghĩa là. –

những gì tôi đã làm trong dự án của tôi để ngăn chặn điều này là trên sự kiện gửi nếu giá trị văn bản bằng với giá trị giữ chỗ tôi đặt giá trị thành null. Nó vẫn còn một chút hacky, nhưng tiếc là hỗ trợ các trình duyệt cũ có xu hướng để có được theo cách đó đôi khi. –

Với tất cả các câu trả lời và ví dụ khác mà tôi đã xem, tôi đã tìm thấy một số vấn đề. Tôi đã viết giải pháp của riêng mình để giải quyết những vấn đề này và quyết định đăng nó ở đây.Hai điều mà mã của tôi sẽ xử lý chính xác mà các giải pháp khác dường như có vấn đề với:

Nếu bạn thực sự muốn nhập văn bản có trong phần giữ chỗ làm giá trị, mã của tôi sẽ không giả định rằng đây là trình giữ chỗ và loại bỏ dữ liệu nhập của bạn.
Nếu bạn nhấn nút làm mới trong IE, nó sẽ không tự động điền các trường có giá trị giữ chỗ.

Bao gồm Modernizr và JQuery như sau:

<script type="text/javascript" src="jquery-1.9.1.js"></script> 
<script type="text/javascript" src="modernizr-2.6.2.js"></script>

Thêm một số CSS như:

<style type="text/css" media="all"> 
.placeholder { 
    color: #aaa; 
} 
</style>

Sau đó, mã chính bạn cần là:

<script type="text/javascript"> 

$(document).ready(function() { 

    // Only do anything if the browser does not support placeholders 
    if (!Modernizr.input.placeholder) { 

     // Format all elements with the placeholder attribute and insert it as a value 
     $('[placeholder]').each(function() { 
      if ($(this).val() == '') { 
       $(this).val($(this).attr('placeholder')); 
       $(this).addClass('placeholder'); 
      } 
      $(this).focus(function() { 
       if ($(this).val() == $(this).attr('placeholder') && $(this).hasClass('placeholder')) { 
        $(this).val(''); 
        $(this).removeClass('placeholder'); 
       } 
      }).blur(function() { 
       if($(this).val() == '') { 
        $(this).val($(this).attr('placeholder')); 
        $(this).addClass('placeholder'); 
       } 
      }); 
     }); 

     // Clean up any placeholders if the form gets submitted 
     $('[placeholder]').parents('form').submit(function() { 
      $(this).find('[placeholder]').each(function() { 
       if ($(this).val() == $(this).attr('placeholder') && $(this).hasClass('placeholder')) { 
        $(this).val(''); 
       } 
      }); 
     }); 

     // Clean up any placeholders if the page is refreshed 
     window.onbeforeunload = function() { 
      $('[placeholder]').each(function() { 
       if ($(this).val() == $(this).attr('placeholder') && $(this).hasClass('placeholder')) { 
        $(this).val(''); 
       } 
      }); 
     }; 
    } 
}); 

</script>

Nguồn

2013-02-25 11:10:30 neelsg

-1

tôi vất vả với điều này bản thân mình. Tôi tìm thấy một công việc xung quanh. Nó hoạt động khá tốt trong IE8 của tôi và trong chrome. Tôi đã phát triển một công việc tuyệt vời xung quanh và có nó giải thích dưới đây ...

HTML

<input type="text" class="input-remover badinput" value="Business Name"> 
<input type="text" class="input-remover badinput" value="Business Address 1"> 
<input type="text" class="input-remover badinput" value="Business Address 2"> 
<input type="text" class="input-remover badinput" value="City">

Tất cả các lĩnh vực đầu vào với lớp đầu vào-tẩy sẽ bị ảnh hưởng. Chỉ cần đặt các từ bạn muốn được sử dụng như một người giữ chỗ bên trong giá trị. Lớp badinput được sử dụng để bạn có thể ngăn ai đó gửi các trường nhập bằng các giá trị mặc định.

JQuery

var textval 

$(".input-remover").click(function(){ 
textval = this.value; 
$(this).addClass("currentspot"); 

if ($(this).hasClass("placeholder")) 
{ 

}else{ 

$(this).val(""); 

} 

}); 


$("input").keypress(function(){ 
$(".currentspot").removeClass("badinput"); 
$(".currentspot").addClass("placeholder"); 

}); 


$("input").blur(function(){ 

if ($(this).hasClass("placeholder")) 
{ 


$(".currentspot").removeClass("currentspot"); 

}else{ 

$(".currentspot").val(textval); 
$(".currentspot").removeClass("currentspot"); 

} 

});

Thành thực mà nói, Id giải thích phần này, nhưng tôi thực sự nghĩ rằng ITD được dễ dàng hơn để nói, không chỉnh sửa nó. CNTT tốt theo cách của nó. Có, bạn có thể sửa đổi nó nhưng tôi sẽ tránh nó trừ khi bạn biết những gì bạn đang làm để ngăn chặn nó diễn xuất.

Và Ive cũng bao gồm một JsFiddle cho thấy nó hoạt động. Tôi hy vọng nó sẽ giúp. Tôi xem xét hầu hết những điều này tôi làm như thế này là một giàn khoan. nhưng ít nhất nó làm cho từ. Chúc may mắn!

Fiddle Here

Nguồn

2013-10-17 20:26:08

Thuộc tính trình giữ chỗ không được hỗ trợ trong IE. Bất kỳ đề xuất?

Trả lời

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