Có văn bản rõ ràng khi bạn nhấp vào nó

Question

Tôi muốn biết cách triển khai một cái gì đó như tràn ngăn xếp khi bạn đăng câu hỏi: "Ít nhất một thẻ chẳng hạn như (css html asp.net), tối đa 5 thẻ.

làm thế nào tôi có thể thực hiện một cái gì đó như thế này cho một đầu vào văn bản trong html, nơi nó được mờ một phần, nhưng khi bạn gõ, nó không hiển thị, và không phai mờ.

tôi không quan tâm như thế nào để làm điều này, miễn là nó hoạt động.

Cảm ơn.

Answer 1

Các tùy chọn đơn giản nhất là sử dụng placeholder thuộc tính:

<input type="text" placeholder="At least one tag, such as 'html', 'asp.net', max five tags." /> 

JS Fiddle demo.

Nếu chéo tương thích là một yêu cầu, sau đó JavaScript cũng là một lựa chọn:

var inputs = document.getElementsByTagName('input'); 

for (i=0; i<inputs.length; i++){ 
    if (inputs[i].hasAttribute('data-hint')){ 
     inputs[i].value = inputs[i].getAttribute('data-hint'); 
      inputs[i].style.color = '#999'; 

     inputs[i].onclick = function(){ 
      this.value = ''; 
     }; 
     inputs[i].onblur = function(){ 
      if (this.value == '' || this.value == this.getAttribute('data-hint')){ 
       this.value = this.getAttribute('data-hint'); 
       this.style.color = '#000'; 
      } 
     }; 
    } 
} 

JS Fiddle demo.

Hoặc, với jQuery:

$('input:text').each(
    function(){ 
     $(this).val($(this).attr('data-hint')); 
      $(this).css('color','#999'); 
    }).click(
    function(){ 
     $(this).val(''); 
      $(this).css('color','#000'); 
    }).blur(
    function(){ 
     if ($(this).val() == ''){ 
      $(this).val($(this).attr('data-hint')); 
      $(this).css('color','#999'); 
     } 
    }); 

JS Fiddle demo.

Tài liệu tham khảo:

• Common Input Element Attributes (W3.org).

Vanilla JavaScript:

• document.getElementsByTagName().
• element.onblur.
• element.onfocus.
• element.hasAttribute().
• element.getAttribute().
• element.style.

jQuery:

• text-input (:text) selector.
• .each().
• .val().
• .css().
• .attr().

Answer 2

<input type="text" name="booga" placeholder="This is default text" /> 

Answer 3

<input type="text" placeholder="Your text here" /> 

Yêu cầu trình duyệt cập nhật nhưng không sử dụng bất kỳ mã nào thuộc loại nào.

Answer 4

<input type="text" placeholder="Default text goes here..."/> 

Như @ câu trả lời Kolink của giải thích, làm điều này đòi hỏi một trình duyệt up-to-date, nhưng không sử dụng mã nào cả.