Trình giữ chỗ không biến mất khi lấy nét trong Chrome

Question

Tôi đã tạo đầu vào theo mã bên dưới.

<div> 
    <form id="me" runat="server"> 
    <input id="stuff" type="text" placeholder="Type here" runat="server" /> 
    </form> 
</div> 

Như dự kiến, khi tôi bắt đầu nhập văn bản trình giữ chỗ biến mất. Nó hoạt động như trong trình duyệt Burning Cat nhưng không có trong trình duyệt Metal Shiny. Điều gì gây ra nó (phong cách, thẻ máy chủ, các công cụ khác ...)? Có thể làm gì về nó?

Answer 1

Firefox và chrome (và safari) hành động khác nhau trên trình giữ chỗ HTML5. Nếu bạn muốn chrome biến mất giữ chỗ trên tập trung, bạn có thể sử dụng sau đây kịch bản:

$('input:text, textarea').each(function(){ 
    var $this = $(this); 
    $this.data('placeholder', $this.attr('placeholder')) 
     .focus(function(){$this.removeAttr('placeholder');}) 
     .blur(function(){$this.attr('placeholder', $this.data('placeholder'));}); 
}); 

Answer 2

Bạn có thể sử dụng plugin của placeholder jquery: placeholderFix. Với plugin này, thẻ giữ chỗ sẽ hoạt động trên cùng một cách trong tất cả các trình duyệt, cũng trong các trình duyệt không hỗ trợ nó.

Answer 3

tôi đi qua cùng một vấn đề ngày hôm nay và tôi đã đưa ra một thuần CSS giải pháp hack:

input:focus::-webkit-input-placeholder { 
    color: transparent; 
}