Onclick事件以删除文本输入字段中的默认值

Question

我有一个输入字段:

<input name="Name" value="Enter Your Name">

当用户单击该框时,如何删除预定义文本(输入您的姓名).

据我所知,Javascript是最好的方法.如果有错,请通知我.

Answer 1

HTML5占位符属性

您可能想要placeholder功能:

<input name="Name" placeholder="Enter Your Name" />

用于旧浏览器的Polyfill

这在一些旧的浏览器中不起作用,但存在polyfill(一些需要jQuery,其他人不需要)来修补该功能.

"拧它,我会自己做的."

如果您想推出自己的解决方案,可以使用元素的onfocus和onblur事件来确定其值应该是什么:

<input name="Name" value="Enter Your Name"
       onfocus="(this.value == 'Enter Your Name') && (this.value = '')"
       onblur="(this.value == '') && (this.value = 'Enter Your Name')" />

避免使用JavaScript混合HTML

你会发现我们大多数人并不是从像onblur和等属性评估JavaScript的大粉丝onfocus.相反,通常鼓励将此逻辑与JavaScript完全绑定.当然,它有点冗长,但它在逻辑和标记之间保持良好的分离:

var nameElement = document.forms.myForm.Name;

function nameFocus( e ) {
  var element = e.target || window.event.srcElement;
  if (element.value == "Enter Your Name") element.value = "";
}

function nameBlur( e ) {
  var element = e.target || window.event.srcElement;
  if (element.value == "") element.value = "Enter Your Name";
}

if ( nameElement.addEventListener ) {
  nameElement.addEventListener("focus", nameFocus, false);
  nameElement.addEventListener("blur", nameBlur, false);
} else if ( nameElement.attachEvent ) {
  nameElement.attachEvent("onfocus", nameFocus);
  nameElement.attachEvent("onblur", nameBlur);
}

演示:http://jsbin.com/azehum/2/edit