Text disappear on click, but new text entered disappears to

Question

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

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

Answer 1

to do this with javascript all you need is

<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 placeholder reference

also

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

here is a working version of your code, i also added submit as the value for your 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

Answer 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"  />

Answer 3

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

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

Answer 4

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.

Answer 5

Remove content from form onclick:

in haml:

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

in html:

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