我可以轻松地创建一个包含文本的 html 输入字段。但是当用户点击输入字段时，文本并没有消失，而是停留在那里。然后，用户必须手动删除要键入的文本。如何创建一个输入字段，当用户单击输入字段框时，文本会消失？
【问题讨论】：
标签： javascript html user-interface dom-events
您要做的是使用 HTML5 属性placeholder，它可以让您为输入框设置默认值：
<input type="text" name="inputBox" placeholder="enter your text here">
这应该可以实现您想要的。但是，请注意，因为 Internet Explorer 9 和更早版本不支持 placeholder 属性。
【讨论】：
为此，您可以使用 onfocus 和 onblur 这两个事件：
<input type="text" name="theName" value="DefaultValue"
onblur="if(this.value==''){ this.value='DefaultValue'; this.style.color='#BBB';}"
onfocus="if(this.value=='DefaultValue'){ this.value=''; this.style.color='#000';}"
style="color:#BBB;" />
【讨论】：
使用占位符属性。当用户开始输入时，文本会消失。 这是我正在做的一个项目的一个例子：
<div class="" id="search-form">
<input type="text" name="" value="" class="form-control" placeholder="Search..." >
</div>
【讨论】：
试试这个。
<label for="user">user</label>
<input type="text" name="user"
onfocus="if(this.value==this.defaultValue)this.value=''"
onblur="if(this.value=='')this.value=this.defaultValue"
value="username" maxlength="19" />
希望这会有所帮助。
【讨论】：
这就像我认为应该解决您所有问题的解决方案一样简单：
<input name="myvalue" id="valueText" type="text" value="ENTER VALUE">
这是您的提交按钮：
<input type="submit" id= "submitBtn" value="Submit">
然后把这个小 jQuery 放到一个 js 文件中：
//this will submit only if the value is not default
$("#submitBtn").click(function () {
if ($("#valueText").val() === "ENTER VALUE")
{
alert("please insert a valid value");
return false;
}
});
//this will put default value if the field is empty
$("#valueText").blur(function () {
if(this.value == ''){
this.value = 'ENTER VALUE';
}
});
//this will empty the field is the value is the default one
$("#valueText").focus(function () {
if (this.value == 'ENTER VALUE') {
this.value = '';
}
});
而且它也适用于旧版浏览器。另外，如果您需要，它可以很容易地转换为普通的 javascript。
【讨论】：
就这么简单：<input type="text" name="email" value="e-mail..." onFocus="this.value=''">
【讨论】：
这样的事情怎么样？
<input name="myvalue" type="text" onfocus="if(this.value=='enter value')this.value='';" onblur="if(this.value=='')this.value='enter value';">
这将在第一次聚焦时清除，但在用户输入其值后不会清除后续聚焦，当留空时恢复给定值。
【讨论】：