38

我想向用户提示他需要在我的文本字段中输入什么。但是，当我设置该值时，一旦用户单击文本字段，它就不会消失。你怎么能让它消失？

<form action="input_password.htm">
  <p>Username:<br><input name="Username" value="Enter username.." type="text" size="20" maxlength="20"></p>
</form>
4

9 回答 9

104

使用一点 JavaScript：

<input 
  value="Enter username..." 
  onfocus="if (this.value === 'Enter username...') this.value=''" ... />

HTML5 对此有一个很好的属性，称为placeholder：

<input placeholder="Enter username.." ... />

但旧浏览器不支持此属性。

于 2011-06-08T14:12:51.467 回答
24

您需要onFocus通过 Javascript 将事件附加到输入字段：

<input type="text" onfocus="this.value=''" value="..." ... />
于 2011-06-08T14:11:44.683 回答
23

给出提示的最好方法是这样的占位符：

<input.... placeholder="hint".../>

于 2013-09-18T11:25:16.967 回答
13

我认为对于您的情况，您的 html 输入简单易行，您可以添加属性标题

<input name="Username" value="Enter username.." type="text" size="20" maxlength="20" title="enter username">
于 2011-06-08T14:18:58.057 回答
13

使用 HTML5，您现在可以像这样使用占位符属性：

<form action="demo_form.asp">
  <input type="text" name="fname" placeholder="First name"><br>
  <input type="text" name="lname" placeholder="Last name"><br>
  <input type="submit" value="Submit">
</form>

http://www.w3schools.com/tags/att_input_placeholder.asp

于 2014-07-10T18:53:01.747 回答
2

我有同样的问题，我已将此代码添加到我的应用程序中，它对我来说工作正常。

步骤 -1：添加 jquery.placeholder.js 插件

步骤-2：在您所在的区域编写以下代码。

$(function () {
       $('input, textarea').placeholder();
});

现在我可以在输入框上看到占位符了！

于 2013-12-24T07:52:31.593 回答
2

这正是你想要的

$(document).tooltip({ selector: "[title]",
                              placement: "top",
                              trigger: "focus",
                              animation: false}); 
<form id="form">
    <label for="myinput1">Browser tooltip appears on hover but disappears on clicking the input field. But this one persists while user is typing within the field</label>
    <input id="myinput1" type="text" title="This tooltip persists" />
    <input id="myinput2" type="text" title="This one also" />
</form>

[参考]

于 2015-10-20T17:40:40.850 回答
0

如果您的意思是像背景中的文本，我会说您使用带有输入字段的标签并使用 CSS 将其放置在输入上，当然。使用 JS，您可以在输入接收到值时淡出标签，并在输入为空时淡入标签。这样，用户就不可能提交描述，无论是出于偶然还是有意。

于 2011-06-08T14:17:53.473 回答
-4

定义工具提示文本

<input type="text" id="firstname" name="firstname" tooltipText="Type in your firstname in this box">

初始化和配置脚本

<script type="text/javascript">
var tooltipObj = new DHTMLgoodies_formTooltip();
tooltipObj.setTooltipPosition('right');
tooltipObj.setPageBgColor('#EEE');
tooltipObj.setCloseMessage('Exit');
tooltipObj.initFormFieldTooltip();
</script>
于 2011-06-08T14:19:29.040 回答