单击时文本消失,但输入的新文本消失为

时间:2013-09-30 05:45:57

标签: javascript html hover

好吧,我正在制作我的第一个登陆页面,一些不太专业的东西,我希望能够自己制作简单的网页。

所以我的问题是,无论何时单击文本框,文本都会消失。它应该是什么。但是,当用户输入文本时,单击文本框并单击它,该文本将消失。

如何才能使新输入的文本不会消失?

我目前的文字字段代码:

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>

我很抱歉没有在这里发帖,但我不知道怎么做代码块事情..

5 个答案:

答案 0 :(得分:5)

用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

即可

  1. 不要再使用相同的id一次,而是使用class
  2. 输入是自动关闭的(如<br>
  3. </br>使用错误<br><br />
  4. 这是您的代码的工作版本,我还为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

答案 1 :(得分:4)

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

答案 2 :(得分:0)

你必须使onfocus事件与onclick事件相同,例如:

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

答案 3 :(得分:0)

onFocus="this.value=''"

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

你可能只需要onclick或onfocus,因为onfocus会考虑到字段的标签以及用鼠标点击它,我建议将代码从onclick移动到onfocus并完全删除onclick。

答案 4 :(得分:0)

从表单中删除内容:

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