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

Onclick event to remove default value in a text input field

本文关键字：字段 默认值 输入 文本 事件 删除 Onclick      更新时间：2023-09-26

>我有一个输入字段：

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

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

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

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

避免将 HTML 与 JavaScript 混合

使用

你会发现我们大多数人都不太喜欢从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

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

<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'; } " />

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

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

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

<input name="Name" placeholder="Enter Your Name">
您可以使用

占位符，当您在搜索框上写文本时，占位符将被隐藏。谢谢

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

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

试试这个：

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

这应该可以做到：

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

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

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

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

所以它看起来像这样：

<input name="Name" value="Enter Your Name" onclick="this.value='';>
相关文章：