Chiến lược được đề xuất cho văn bản gợi ý hộp nhập (chẳng hạn như "Tìm kiếm" được xếp chồng lên hộp tìm kiếm)?

Question

Nhiều trang có một hộp tìm kiếm cho họ thường sẽ có văn bản được phủ lớp "Tìm kiếm" bị biến mất khi tập trung vào phần tử và xuất hiện lại khi tiêu điểm bị mất. Tôi tò mò muốn biết những gì mọi người đề nghị là chiến lược tốt nhất cho việc này.

Chiến lược tôi đã sử dụng là sử dụng các sự kiện lấy nét/làm mờ của phần tử đầu vào và kiểm tra nội dung để xác định xem giá trị có nên thay đổi hay không. Trong ví dụ sau tôi sử dụng jQuery. Lấy một ví dụ, nơi chúng tôi có một yếu tố đầu vào với một id của quick-search, khi có sản phẩm nào tôi hiển thị dòng chữ "Tìm kiếm" khi tập trung để loại bỏ các văn bản và cập nhật một phong cách,

$(function() { 
    $("#quick-search").focus(function() { 
    if (this.value === "Search") { 
     $(this).removeClass("quick-search-not-focussed"); 
     this.value = ""; 
    } 
    }).blur(function() { 
    if (this.value === "") { 
     $(this).addClass("quick-search-not-focussed"); 
     this.value = "Search"; 
    } 
    }); 
}) 

lớp quick-search-not-focussed của tôi trông như sau:

.quick-search-not-focussed { color: #bbb; } 

Điều này phù hợp với tôi khi hộp tìm kiếm chỉ thực sự được gửi khi bạn nhập, vì một số trường hợp yêu cầu nhiều yếu tố đầu vào hơn với văn bản đầu vào bị che phủ. ? Cá nhân tôi không thích sử dụng hình ảnh trong cách tiếp cận này.

Answer 1

jQuery placeholder

Trên thực tế, có rất quite a few similar plugins. Người mà tôi liên kết là đủ tốt cho tôi.

Answer 2

Tôi đã sử dụng thông tin sau trong mã của mình.

<input id="searchBox" 
     class="search-gray" 
     name="q" tabindex="1" 
     onblur=" if (this.value==''){this.value = 'search...'; this.className = 'search-gray'}" 
     onfocus=" this.className = ''; if (this.value=='search...') {this.value = ''}" 
     type="text" 
     value="search..."> 

<style> 
    .search-gray{color:#c5c5c5;} 
</style> 

EDIT
Đây là những gì StackOverflow sử dụng cho hộp tìm kiếm của họ

<input name="q" 
     class="textbox" 
     tabindex="1" 
     onfocus="if (this.value=='search') this.value = ''" 
     type="text" 
     maxlength="80" 
     size="28" 
     value="search"> 

Answer 3

Tôi thường làm điều gì đó tương tự như sau:

<input type="text" name="email" data-original="Email address" value="Email address" /> 
<input type="text" name="username" data-original="Username" value="Username" /> 

<script type="text/javascript"> 
    $(document).ready(function(){ 
     $('input[data-original]').each(function(){ 
      var input = $(this); 
      var original = input.attr('data-original'); 

      input.focus(function(){ 
       if (input.val() == original) 
        input.addClass('focused').val(''); 
      }); 
      input.blur(function(){ 
       if (input.val() == '') 
        input.removeClass('focused').val(original); 
      }); 
     }); 
    }); 
</script> 

này cũng giống như cách tiếp cận của bạn ngoại trừ với lợi thế là bạn không phải lặp lại mã của mình cho từng trường; thay vào đó bạn chỉ có thể chỉ định data-original trên các trường của bạn và chúng sẽ tốt để thực hiện.

Answer 4

FWIW, trình duyệt Webkit trực tiếp hỗ trợ một thuộc tính placeholder trên <input> tags:

​<input placeholder='enter something' />​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​ 

Answer 5

Có một cái nhìn tại một này: http://fuelyourcoding.com/scripts/infield/

khác nhau của nó từ những người khác ở đây ở chỗ nó có thể sử dụng nhiều hơn một chút. Nhãn mờ dần trên tiêu điểm trường và chỉ biến mất khi bạn bắt đầu nhập.

và không phô trương.