单击时HTML字段中的文本消失？

Posted 2023-03-05

【中文标题】单击时HTML字段中的文本消失？

【英文标题】：Text in HTML Field to disappear when clicked?

【发布时间】：2010-12-10 05:05:54

【问题描述】：

我可以轻松地创建一个包含文本的 html 输入字段。但是当用户点击输入字段时，文本并没有消失，而是停留在那里。然后，用户必须手动删除要键入的文本。如何创建一个输入字段，当用户单击输入字段框时，文本会消失？

【问题讨论】：

This is the modern way to do it. 这里的很多答案已经过时了。

【参考方案1】：

您要做的是使用 HTML5 属性placeholder，它可以让您为输入框设置默认值：

<input type="text" name="inputBox" placeholder="enter your text here">

这应该可以实现您想要的。但是，请注意，因为 Internet Explorer 9 和更早版本不支持 placeholder 属性。

【讨论】：

输入占位符属性在 IE9 和 IE8 中不支持...更多请转至caniuse.com

有没有办法让占位符在用户开始输入时消失，但在字段“聚焦”时不会消失？

【参考方案2】：

为此，您可以使用 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;" />

【讨论】：

如果用户不输入vlue，它会传递空白值还是默认值？我的用例也与此相同，但我想当用户不输入任何空白值时应该分配我们该怎么做？有什么建议吗？并且不使用占位符属性

@mahesh 你可以做的是添加一个背景图像，上面写着你想要的文本，并添加 onClick 事件监听器，使图像不可见。

如果您仍然需要支持 IE9，这是一个很好的解决方案！谢谢！

【参考方案3】：

使用占位符属性。当用户开始输入时，文本会消失。 这是我正在做的一个项目的一个例子：

<div class="" id="search-form">
    <input type="text" name="" value="" class="form-control" placeholder="Search..." >
</div>

【参考方案4】：

试试这个。

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

希望这会有所帮助。

【讨论】：

如果用户不输入vlue，它会传递空白值还是默认值？我的用例也与此相同，但我想当用户不输入任何空白值时应该分配我们该怎么做？有什么建议吗？并且不使用占位符属性

【参考方案5】：

这就像我认为应该解决您所有问题的解决方案一样简单：

<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。

【讨论】：

感谢它适用于我们必须支持的 IE9。所以我不能使用占位符的东西。为了将文本框中的值设置保留在一个位置，我使用 jQuery 在文档准备好的框中设置值。 $(document).ready(function () /* 加载文档时设置搜索输入框值*/ $('#valueText').val("ENTER VALUE");

不适用于 Chrome 版本 -->> 版本 81.0.4044.138（官方构建）（64 位）

【参考方案6】：

就这么简单：<input type="text" name="email" value="e-mail..." onFocus="this.value=''">

【参考方案7】：

这样的事情怎么样？

<input name="myvalue" type="text" onfocus="if(this.value=='enter value')this.value='';" onblur="if(this.value=='')this.value='enter value';">

这将在第一次聚焦时清除，但在用户输入其值后不会清除后续聚焦，当留空时恢复给定值。