你如何让输入的文字消失？

Question

我有一个输入框，您可以在其中输入一些文本。它有一些默认文本：

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

我想让默认文本在用户单击默认文本或在输入字段内时消失。

我该怎么做？

Answer 1

使用占位符属性

<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 2

尝试使用占位符属性（占位符="Your Text" 而不是值="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 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=''}" />

你如何让输入的文字消失？

How do you make the input text disappear?

html

text

field

input

hide