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

Question

我有一个输入字段：

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

当用户点击该框时，如何删除预定义文本（输入您的姓名）。

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

Answer 1

HTML5占位符属性

您可能需要placeholder功能：

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

适用于旧浏览器的Polyfill

这在某些旧版浏览器中不起作用，但polyfills exist（某些需要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和onfocus等属性评估JavaScript。相反，通常鼓励将此逻辑与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

Answer 2

这是正确的跨浏览器方式：

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

Answer 3

使用onclick="this.value=''"：

<input name="Name" value="Enter Your Name" onclick="this.value=''">

Answer 4

如前所述，我甚至看到了这个问题placeholder就是答案。获胜的HTML5！但对于那些不能依赖该功能的可怜的不幸灵魂，请将jquery插件视为增强。 HTML5 Placeholder jQuery Plugin

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

Answer 5

你可以使用占位符，当你在搜索框中写入文本时，占位符将被隐藏。 感谢

<input placeholder="Search" type="text" />

Answer 6

这应该这样做：

的 HTML 的

<input name="Name" value="Enter Your Name" onClick="blankDefault('Enter Your Name', this)">

的的JavaScript 的

function blankDefault(_text, _this) {
    if(_text == _this.value)
        _this.value = '';
}

虽然有更好/更少突兀的方式，但这将完成工作。

Answer 7

你真的想要展示一个占位符，HTML 5提供这个功能，它非常甜蜜！

试试这个：

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

Answer 8

<input name="Name" value="Enter Your Name" onfocus="freez(this)" onblur="freez(this)">


function freez(obj)
{
 if(obj.value=='')
 {
   obj.value='Enter Your Name';
 }else if(obj.value=='Enter Your Name')
 {
   obj.value='';
 }
} 

Answer 9

除placeholder="your text"外，您还可以执行onclick="this.value='';

所以它看起来像：

<input name="Name" value="Enter Your Name" onclick="this.value='';>