如何使輸入文本消失？

Question

我有一個輸入字段，您可以在其中輸入一些文本。 它具有一些默認文本：

<input type="text" id="text" value="Type some text here" maxlength="35" tabindex="10">

當用戶單擊默認文本或在輸入字段內時，我想使默認文本消失。

我怎樣才能做到這一點？

Answer 1

嘗試使用占位符屬性（placeholder =“ Your Text”代替value =“ Your Text”）：

<input type="text" id="text" maxlength="35" tabindex="10" placeholder="Type some text here">

注意：占位符屬性在IE8 / 9或Opera Mini（ http://caniuse.com/#feat=input-placeholder ）中不起作用。

Answer 2

使用占位符屬性

<input type="text" id="text" value="" maxlength="35" tabindex="10" placeholder="Type some text here">

如果要支持較舊的瀏覽器：

<input type="text" id="text" value="Type some text here" maxlength="35" tabindex="10" onclick="this.value = (this.value == 'Type some text here' ? '' : this.value);">

http://jsfiddle.net/gLjt98af/

Answer 3

1）使用占位符屬性

您可以使用占位符屬性，如下所示。 只要不單擊文本框內的內容，它就會顯示出來。 在其中鍵入任何內容后，文本將消失。

的HTML

<input type="text" id="text" placeholder="Type some text here" maxlength="35" tabindex="10">

2）使用Java腳本功能

的HTML

<input type="text" id="text" value="Type some text here" maxlength="35" tabindex="10" 
onclick='cleartext()' onblur='settext()'>

JS

function cleartext(){
  document.getElementById('text').value= '';
}

function settext(){
  if(document.getElementById('text').value=== ''){
    document.getElementById('text').value= 'Type some text here' 
  }
}

Answer 4

除了使用占位符屬性，您還可以嘗試以下操作：

<input type="text" value="Type some text here" onfocus="if (this.value == 'Type some text here') {this.value=''}" />