单击时文本消失，但输入的新文本消失答案

【问题标题】：Text disappear on click, but new text entered disappears to单击时文本消失，但输入的新文本消失
【发布时间】：2013-09-30 05:45:56
【问题描述】：

嗯，我正在制作我的第一个着陆页，不是太专业，我想掌握能够自己制作简单网页的窍门。

所以我的问题是，每当您单击文本框时，文本就会消失。它应该。但是当用户输入文本，单击文本框并再次单击它时，该文本消失了。

如何让新输入的文字不消失？

我当前的文本字段代码：

http://pastie.org/8366114

<input type="text" value="Enter Your First Name" id="form" 
  onblur="javascript:if(this.value=='')this.value='Enter Your First Name';" 
  onclick="javascript:if(this.value=='Enter Your First Name')this.value='';" 
  onFocus="this.value=''">
</input></br>
<input type="text" value="Enter Your Email" id="form" 
  onblur="javascript:if(this.value=='')this.value='Enter Your Email';" 
  onclick="javascript:if(this.value=='Enter Your Email')this.value='';" 
  onFocus="this.value=''">
</input></br>
<input type="text" value="Enter Your Phone Number" id="form" 
  onblur="javascript:if(this.value=='')this.value='Enter Your Phone Number';" 
  onclick="javascript:if(this.value=='Enter Your Phone Number')this.value='';" 
  onFocus="this.value=''">
</input></br>
<input type="submit" class="button" name="submit" value=""></input>

我很抱歉没有在这里发布它，但我不知道如何做代码块的事情..

【问题讨论】：

复制广告粘贴代码，然后突出显示并按“ctrl + k”
如果有让您满意的答案，您可以点击答案旁边的勾选接受它。

标签： javascript html hover

【解决方案1】：

用 javascript 做到这一点你只需要

<input type="text" value="Enter Your First Name" 
onblur="if(this.value=='')this.value='Enter Your First Name';" 
onfocus="if(this.value=='Enter Your First Name')this.value='';" />

DEMO

但是你可以简单地使用 html5 placeholder reference

还有

不要多次使用相同的id，而是使用class。
输入是自动关闭的（如<br>）
</br> 错误使用 <br> 或 <br />

这是您的代码的工作版本，我还为您的button 添加了submit 作为value

<input type="text" placeholder="Enter Your First Name" class="form"><br/>
<input type="text" placeholder="Enter Your Email" class="form"><br/>
<input type="text" placeholder="Enter Your Phone Number" class="form"><br/>
<input type="submit" class="button" name="submit" value="submit">

DEMO

【讨论】：

我没有为提交按钮留下值，因为它实际上会将文本“提交”放在图像按钮上。我的按钮是一种图像类型的按钮。不敢相信我一直在做所有这些 javascript 并试图在有这个简单的解决方案时解决 IE.. Ty :)
@Travis btw，即使在 javascript 中，您也可以编写一个函数来大大减少代码。

【解决方案2】：

<input type="text" value="Enter Your First Name" id="form" onblur="if(this.value=='')this.value='Enter Your First Name';" onfocus="if(this.value=='Enter Your First Name')this.value='';" />

或者如果你使用的是 HTML5，你可以使用占位符属性：

<input type="text" placeholder="Enter Your First Name" id="form"  />

【讨论】：

【解决方案3】：

你必须让 onfocus 事件和 onclick 事件一样，例如：

onfocus="javascript: if (this.value == 'Enter Your First Name') this.value = '';"

【讨论】：

【解决方案4】：

onFocus="this.value=''"

这会导致您的文本字段无条件重置为空白。

您可能只需要 onclick 或 onfocus 在这里，因为 onfocus 将考虑到该字段的选项卡以及用鼠标单击它，我建议将代码从 onclick 移动到 onfocus 并完全删除 onclick。

【讨论】：

【解决方案5】：

从表单中删除内容 onclick：

在哈姆里：

= f.text_field :title, :value => 'Name', :onfocus => "if (this.value=='Name') this.value='';"

在 html 中：

<input id="project_title" name="project[title]" onfocus="if (this.value=='Name') this.value='';" type="text" value="Name">

【讨论】：

oops %)foget html5 属性 placeholder="你的数据"