代码片段 → JavaScript → 聚焦时清空字段 聚焦时清空字段 Chris Coyier 于 2009年9月4日 <input type="text" onfocus="if(this.value == 'value') { this.value = ''; }" value="value" /> 将“value”替换为默认值。如果字段被选中，默认值将消失。如果用户之前更改了字段值，则该值将保持不变。 或者，使用 onfocus=”this.value=”;” 始终清空字段。
那也加上 ONBLUR 怎么样？以防用户没有输入任何内容就离开字段。
function clearText(field){
if(field.defaultValue == field.value){
field.value = “”;
}
else if(field.value == “”){
field.value = field.defaultValue;
}
}
如果我们有很多输入、文本区域。它对聚焦和失焦都有效。
例如：
注释部分
非常简单。我们只需要定义一个脚本并将其放在头部。
抱歉，我的代码没有显示出来。我再试一次…
如果字段连接到一个表格并且输入字段是预定义的呢？
例如：我有一个字段“S”，它在网页中显示为 null，用户犯了一个错误，而不是返回并高亮显示并删除，他们只需点击重置按钮即可。如果我使用 input type=”text”，它只会创建一个新的空白字段。我希望它引用预定义的字段。
非常感谢您提供这个信息，我知道这是一个非常基本的命令，但我在努力找出为什么它不起作用，但我只是复制粘贴了您的代码，然后一切正常！
我还使用了
onblur=”if(this.value == ”) { this.value = ”; }” value=”value”
这样，如果什么也没输入，它就会回到原来的状态！
@mgpwr
感谢 Sheffield 的补充！…我在其中插入了您的“onblur”代码，发现它对我不起作用…但后来我注意到需要调整“花括号”才能使其对我有用
onblur=”if(this.value == ”) { this.value = ‘value’; }” value=”value”
@Jamie – Sheffield 的代码只有一点点小错误。他用了一个双引号，而应该用单引号。
这样做
而不是这样
抱歉，听起来我真的很业余…
但是..我似乎无法使其工作，我有一个 PHP 表单，PHP 在页面中…我不知道为什么它不起作用。
我需要做
如果您能帮我解决这个问题，我将不胜感激。
抱歉，我对这方面很业余 :)
我不知道如何在此帖子中添加代码..
我的意思是放
Script type=””
/script
但是用
救了我！
非常感谢您提供这个信息！非常有用。 :)
为了更通用，使用 jQuery
var el = $(“input[type=text], textarea”);
el.focus(function(e) {
if ($(this).value == $(this).defaultValue)
$(this).value = “”;
});
el.blur(function(e) {
if ($(this).value == “”)
$(this).value = $(this).defaultValue;
});
终于让两者都工作了。失焦和聚焦。谢谢 Chris！
实际上，至少对于 jQuery 1.6.2 来说，通用代码段应该如下所示
或者，如果您想使用 $(this)，它应该是 $(this)[0]，但这看起来很丑。
我正在修改我的输入文本脚本，但您这里的内容非常有用。谢谢！
谢谢，这很简洁明了。
问题 - 如何设置失焦，以便如果用户决定不输入任何内容，值会保留在字段中或重新显示在字段中？~ 谢谢
这是我使用的代码，它完全满足您的要求
input type=”text” value=”First Name” name=”fname” class=”text_field” onfocus=”if (this.value == ‘First Name’) {this.value = ”;}” onblur=”if (this.value == ”) {this.value = ‘First Name’;}”
对于文本区域….
textarea name=”message” class=”text_area” onfocus=”if(this.value==this.defaultValue)this.value=”;” onblur=”if(this.value==”)this.value=this.defaultValue;” cols=”72″ rows=”11″>在此输入您的消息…
抱歉没有括号，我不知道如何在此处插入代码。
您太棒了！~ 谢谢
为记录在案，这是我正在使用的代码/语法
<input type=”text” name=”Search” class=”searchbox” onfocus=”if(this.value == ‘Search Artist’) { this.value = ”; }” onblur=”this.value=!this.value?’Search Artist’:this.value;” value=”Search Artist” />
效果很好！
谢谢。非常有帮助！
这是否适用于表单字段。我目前在 onfocus=”cl(this)” 中设置了字段 - 它可以删除文本，但不能添加回来
如何将默认值设置为灰色？
谢谢，很有用！
我在我的表单中使用了这个
input name=”example” type=”text” id=”example” value=”example” onFocus=”if(this.value == ‘example’) {this.value = ”;}” onBlur=”if (this.value == ”) {this.value = ‘example’;}”
…如果未填写，如何不将此“example: example”发送到收件人的电子邮件？
感谢您提供所有这些有用的帮助！
（新手）
function change(i){
if(i.value == ”){ i.value = ‘Search…’; }
}
function change2(i){
if(i.value == ‘Search…’){ i.value = ”; }
}
这是我的版本，非常简单和漂亮
它看起来非常简洁和逻辑，但应该放在哪里。我有一个 ccs 联系网站，
而且我无法让任何一个工作。
我只是希望“姓名、电子邮件和内容”在框内以灰色显示，但由于某种原因，给出的示例都无法工作。
这是我的 html
姓名：
电子邮件：
评论
这是我的 css
form {
/*margin: 20px 0 0 40px;*/
font-family: Verdana;
font-style : normal ;
font-size : 0.865em;
font-weight :550;
text-align : left;
color: #000000}
input { margin: 4px;
max-width: 100% }
textarea {
max-width: 100%
}
哇，这正是我想要的。它对我的作用完美！
谢谢！
如果您聚焦于文本框，可以更改其他元素，例如 div 或 ul 吗？
如果我聚焦于文本框，我想更改我的 li 宽度
首页
关于
联系 <—更改此宽度
<– 如果此项处于焦点状态
很好。但我希望实现类似您联系表单的功能。比如，当文本框为空时，显示水印图像；当我们输入文本时，图像消失。但如果用户清空文本框，水印又重新出现。？
使用 Javascript 实现水印功能。
它在获得焦点 (onfocus) 和失去焦点 (onblur) 时起作用。
您只需要将默认字符串保留在“name”属性中。
我使用 jQuery 获取元素或属性，但您也可以使用标准技术，例如“getElementBy***”。
$(‘input’).focus(function(){
if($(this).val()==$(this).attr(“name”)){
$(this).val(“”);
$(this).css(“color”,”#141310″);
}
$(this).blur(function(){
if($(this).val()==””){
$(this).val($(this).attr(“name”));
$(this).css(“color”,”#9A9A9A”);
}
});
});
感谢@Artem。我昨天刚刚弄清楚了，使用了相同的方法并在网站的顶部栏中实现了它。
http://www.udaipurtimes.com
感谢你的回复，伙计。:)
你好
我想在 Drupal7 的 Webform 模块构建的表单上实现此功能。由于它是模块构建的，我无法将 onblur 或 onfocus 的 jscript 标签添加到文本字段中。该网站尚未上线，因此无法在此处发布网址。
请帮助我如何实现此功能。如果可以通过 php 实现，那也行，因为我拥有主要的 template.php 文件。但我更倾向于使用 jQuery。
谢谢
我想帮忙
如果用户在框中输入数字，则另一个框将获得焦点，我该怎么做？
你好，
这很棒，谢谢！不过有一个问题……页面默认值可以通过表单验证（表单可以使用默认值提交）……是否有可以附加的字符串，以便验证器不将其识别为用户值？
KW
为什么不使用 placeholder 属性呢？例如 <br/>
<br/>
< input placeholder=”Hello world!” />
<br/>
<br/>
只要用户未输入任何内容，这就会将引号之间的文本设置在输入字段中。一旦他开始输入，文本就会消失（因此是 placeholder）。
注意：如果您希望每次获得焦点时都清除字段（而不仅仅是在用户已经输入内容之前），建议的解决方案可能更有效。
placeholder= 效果很好，但不是跨浏览器兼容的。
谢谢，非常有帮助！
Paul Clapp，现在是 2013 年，“placeholder”几乎在所有浏览器和移动设备上都能正常工作。
Evan，“placeholder”在 Internet Explorer 中不起作用……（我不知道为什么人们还在使用它！）
我成功地让我的 opt-in 表单实现了这个功能，太自豪了！如果没有这个提示，我无法做到，非常感谢！
你好！
我正在使用嵌入式表单，因此无法访问 HTML。
我正在尝试调整上面的 CSS 代码以清除我的表单字段。
这是我某一行项目的 HTML 代码示例……有人可以帮我提供 CSS 代码吗？
非常感谢，
JK
由于某种原因，它没有获取我的代码：也许我会省略“<”
input type=”text” class=”hs-input” required=”required” name=”state” value=”state”
我的页面右上角有一个迷你购物车。在客户从页面上选择他们想要购买的商品（可能有多个选择）后，这些商品会被传递到迷你购物车，但表单不会清除。我尝试了多种 Javascript 来将输入字段重置为空白，但似乎都不起作用。有人建议另一个脚本正在干扰，但我页面上没有脚本错误。迷你购物车唯一的脚本是 window.focus()。这可能是问题所在吗？
在阅读了这里的代码片段中的帖子后，我将以下内容拼凑在一起，效果很好。在我的案例中，我将其用于简单的搜索字段。
<input type="text" onfocus="if(this.value == 'Search This Site') { this.value = ''; }" class="form-control" onBlur="if(this.value == '') { this.value = 'Search This Site'; }" value="Search This Site">首先，我是一个网站构建新手，我所有的工作都基于像您这样的其他人和论坛的帮助！
我一直对我的 Web 表单使用以下函数
onfocus=”if(this.value==defaultValue) {this.value=”;}” onblur=”if(this.value==”) {this.value=defaultValue}”
问题是表单字段正在使用默认值进行验证，例如，如果字段填充了“姓名”，则访客可以在不输入其姓名的情况下继续，即使该字段是必填字段。（您可以在 http://www.kaamwaala.com 首页的联系表单上查看它）。
有人可以帮我通过建议我一直在使用的 HTML 代码中所需的更改来帮助我进行验证吗？
谢谢……你将成为我的救星！
嗨，我试图在函数中执行此操作，但它无法正常工作。
function prüfe_inhalt() {if (check()) {
alert ("不允许相同数字。请键入另一个数字。");
this.value ='';
}
}
现在我有一个
看起来“this”不再引用输入了..
最后尝试
input type text value empty onblur prüfe_inhalt
在获得焦点时清除，如果在失去焦点时未输入任何内容，则会将值放回
value=”First Name” onfocus=”if(this.value==this.defaultValue)this.value=”;” onblur=”if(this.value==”)this.value=this.defaultValue;”
刚刚测试过，这个方法有效。非常有用，感谢分享。
如果我的输入是服务器端，如何使用这种方法？
当我的输入是服务器端时，如何使用这种方法？
因为我想在代码隐藏中获取文本框的值。
clearText = function(field){
field.value = ”;
field.onfocus = function() {};
}
以及
onfocus=’clearText(this);’
只删除（简单地）第一次初始化！
是的，在 opt-in 表单上使用 onblur 很棒。谢谢。
永远不要在获得焦点时清除字段！这使得在字段失去焦点后无法更正拼写错误，除非重写所有内容。相反，只需在获得焦点时全选，用户就可以选择只键入并替换内容或更改选择并仅修改部分内容。
另外，永远不要在点击时选择整个字段。它阻止用户在字段内选择。如果您希望选择所有文本，请在获得焦点时执行此操作。
我是 Wufoo 表单的订阅者。我创建了一个表单并添加了一个预定义值。当我点击该字段时，文本仍然存在，必须使用退格键将其删除。有没有办法使用 css 或将脚本添加到表单中来删除它？
谢谢
这些问题掌握在自己手中，因为他们希望使用 CSS
如果我们不想使用 JavaScript
必要的
我需要一个输入字段，其中包含“N/A”文本值（不是占位符），该字段将清除“N/A”并允许用户键入任何他们想要的内容，但如果他们决定删除他们编写的任何内容，则会将“N/A”放回。使用上面的一些答案和我自己的一部分，这对我来说非常有效
onFocus="value=''" onblur="this.value=!this.value?'N/A':this.value;" value="N/A"如果输入是日期而不是文本字段怎么办？