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

Text disappear on click, but new text entered disappears to

提问by Travis

Well I am making my first landing page, something not overly professional, I want to get in the hang of being able to make simple web pages myself.

好吧，我正在制作我的第一个登陆页面，不是过于专业的东西，我想掌握自己制作简单网页的窍门。

So my issue is that whenever you click on the textbox, the text disappears. Which it should. But when the user enters text, clicks off the text box and clicks back on it, that text disappears.

所以我的问题是，无论何时单击文本框，文本都会消失。它应该。但是当用户输入文本，点击文本框并再次点击它时，该文本就会消失。

How can I make it so that the newly entered text does not disappear?

我怎样才能使新输入的文本不会消失？

My current code for the text fields:

我当前的文本字段代码：

http://pastie.org/8366114

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>

I apologize for not posting it on here, but I don't know how to do the code block thing..

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

回答by Math chiller

to do this with javascript all you need is

要使用 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

演示

however you can just simply use the html5 placeholderreference

但是你可以简单地使用 html5placeholder参考

also

还

1. dont use the same idmore then once, instead use class.
2. input is self-closing (like <br>)
3. </br>is wrong use <br>or <br />

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

here is a working version of your code, i also added submitas the valuefor your button

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

<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

演示

回答by Tepken Vannkorn

<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='';" />

or if you are using HTML5, you can use placeholder attribute:

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

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

回答by Moe Assaad

you have to make the onfocus event the same as the onclick event, e.g:

您必须使 onfocus 事件与 onclick 事件相同，例如：

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

回答by JammGamm

onFocus="this.value=''"

This is causing your text fields to be reset to blank unconditionally.

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

You probably only need onclick or onfocus here, and since onfocus will take into account tabbing into the field as well as clicking it with the mouse, I would recommend moving the code from onclick to onfocus and deleting onclick altogether.

您在这里可能只需要 onclick 或 onfocus，并且由于 onfocus 会考虑到该字段的 Tab 键以及用鼠标单击它，我建议将代码从 onclick 移动到 onfocus 并完全删除 onclick。

回答by Roman Klevtcov

Remove content from form onclick:

从表单 onclick 中删除内容：

in haml:

在哈姆：

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

in html:

在 html 中：

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