クリックするとクリアテキストが表示されます

Question

質問を投稿する際にスタックオーバーフローなどを実装する方法を知りたい場合は、「（css html asp.net）などのタグが1つ以上あり、最大5個のタグ。

どのように私はそれが部分的に色あせているHTMLのテキスト入力のためにこのような何かを実装することができますが、あなたが入力したとき、それが表示されない、と色あせていない。

私はどのように気にしません限り、それは作品として、これを行うには。

感謝。

Answer 1

最も簡単なオプションはplaceholder属性を使用することです。

クロスの互換性が必要な場合には、JavaScriptはまた、オプションである：

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。

それとも、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。

参考文献：

• Common Input Element Attributes (W3.org)。

バニラはJavaScript：

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

のjQuery：

• text-input (:text) selector。
• .each()。
• .val()。
• .css()。
• .attr()。Kolinkの答え@として

Answer 2

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

を

Answer 3

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

最新のブラウザが必要ですが、いかなる種類のコードを使用していません。

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

JS Fiddle demo：

Answer 4

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

は最新のブラウザが必要ですが、まったくコードを使用していないこれをやって、説明しています。