16

我有一个输入字段：

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

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

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

4

9 回答 9

46

HTML5 占位符属性

您可能需要placeholder以下功能：

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

旧浏览器的 Polyfill

这在某些较旧的浏览器中不起作用，但存在 polyfills（有些需要 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')" />

避免将 HTML 与 JavaScript 混合使用

你会发现我们大多数人都不是从属性评估 JavaScript 的忠实拥护者，比如onblur和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

于 2012-05-17T14:42:37.840 回答
4

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

<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'; } " />
于 2012-05-17T14:44:56.503 回答
3

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

<input name="Name" value="Enter Your Name" onclick="this.value=''">
于 2016-01-19T10:10:44.353 回答
2

如前所述，我什至看到这个问题placeholder就是答案。HTML5 的胜利！但是对于那些不能依赖该功能的可怜的不幸灵魂，也可以将 jquery 插件视为一种增强。HTML5 占位符 jQuery 插件

<input name="Name" placeholder="Enter Your Name">
于 2012-05-17T14:51:52.723 回答
2

您可以使用占位符，当您在​​搜索框上写文字时，占位符将隐藏。谢谢

<input placeholder="Search" type="text" />
于 2014-07-16T00:23:03.907 回答
1

这应该这样做：

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 = '';
}

虽然有更好/不那么突兀的方法，但这将完成工作。

于 2012-05-17T14:41:19.217 回答
1

你实际上想显示一个占位符，HTML 5 提供了这个功能，它非常棒！

试试这个：

<input name="Name" placeholder="Enter Your Name">
于 2012-05-17T14:42:26.137 回答
1 
<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='';
 }
}
于 2012-05-17T16:13:25.053 回答
1

除了placeholder="your text"你还可以做onclick="this.value='';

所以它看起来像：

<input name="Name" value="Enter Your Name" onclick="this.value='';>
于 2016-08-04T16:57:08.977 回答