HTML 输入字段提示

Posted 2023-02-22

【中文标题】HTML 输入字段提示

【英文标题】：HTML input field hint

【发布时间】：2011-09-10 22:09:41

【问题描述】：

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

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

【问题讨论】：

你为什么要在你的值中添加提示...???

@harishtps：所以用户会得到一个指示，他需要输入什么值？

@Richard JP Le Guen：是的，不过应该在现场。

这个问题与提示无关

使用占位符属性，placeholder="输入用户名"

【参考方案1】：

使用一点 javascript：

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

html5 有一个很好的属性，称为placeholder：

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

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

【讨论】：

在用户聚焦后保留提示文本：onfocus="if (this.value == 'Hint text..') this.value=''" value="Hint text. ." onblur="if (this.value == '') this.value='提示文字..'"

如果用户在框中输入Enter username...怎么办？

然后文本字段被清除，因此如果占位符文本是该字段的可能输入，则使用此 polyfill 需要提前考虑。在这种情况下，Enter username.. 是极不可能的用户名选择。 :)

【参考方案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>

[ref]

【参考方案3】：

使用 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

【参考方案4】：

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

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

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

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

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

【参考方案5】：

最好的提示方式是这样的占位符：

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

【讨论】：

这是真正的答案。它很简单，不需要 javascript 或悬停即可工作。该问题被标记为 HTML，没有提及 javascript。

【参考方案6】：

定义工具提示文本

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

【讨论】：

感谢 harishtps，我复制并粘贴了代码，但没有任何反应？

糟糕的答案，您没有指定在哪里可以找到 DHTMLgoodies_formTooltip

添加外部库的来源以改进您的答案。

【参考方案7】：

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

<input name="Username" value="Enter username.." type="text" size="20" maxlength="20" title="enter username">

【讨论】：

+1 这真的很聪明，但只有当您将鼠标悬停在该字段上时才有效。无论如何我都会使用它。谢谢。

感谢您的赞赏。 =)

【参考方案8】：

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

【参考方案9】：

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

<input type="text" onfocus="this.value=''" value="..." ... />

【讨论】：

+1 为简单起见。 onfocus 的反面是什么？我试过你的解决方案，效果很好。唯一的问题：如果用户将鼠标移出该字段，则该值消失了。您能以某种方式将其带回来吗？

好的，现在自己找到了。我添加了：onblur="if (this.value=='') this.value='请输入任何内容...'"

在用户聚焦后保留提示文本：onfocus="if (this.value == 'Hint text..') this.value=''" value="Hint text. ." onblur="if (this.value == '') this.value='提示文本..'"

随着 HTML5 的兴起，请考虑使用 placeholder 标签，如 aorcsik 的回答中所述。

placeholder 是现代答案，这个答案真的应该被删除。该解决方案具有破坏性。它将清除用户在重新聚焦到该字段后输入的任何值。