HTML 输入字段提示
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6280034/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
HTML input field hint
提问by Frank Vilea
I want to provide the user with a hint on what he needs to enter into my text field. However, when I set the value, it does not disappear once a user clicks on the text field. How can you make it disappear?
我想向用户提供有关他需要在我的文本字段中输入什么内容的提示。但是，当我设置该值时，一旦用户单击文本字段，它就不会消失。你怎么能让它消失？
<form action="input_password.htm">
<p>Username:<br><input name="Username" value="Enter username.." type="text" size="20" maxlength="20"></p>
</form>
采纳答案by Marc B
You'd need attach an onFocusevent to the input field via Javascript:
您需要onFocus通过 Javascript将事件附加到输入字段：
<input type="text" onfocus="this.value=''" value="..." ... />
回答by aorcsik
With a bit of javascript
使用一些 javascript
<input value="Enter username.." onfocus="if (this.value == 'Enter username..') this.value=''" ... />
HTML5 has a nice attribute for this, called placeholder
HTML5 有一个很好的属性，称为占位符
<input placeholder="Enter username.." ... />
but above is not supported in old browsers.
但旧浏览器不支持上述内容。
回答by Kunal
the best way to give a hint is placeholder like this:
给出提示的最佳方式是这样的占位符：
<input.... placeholder="hint".../>
<input.... placeholder="hint".../>
回答by Jasonw
I think for your situation, the easy and simple for your html input , you can probably add the attribute title
我认为对于您的情况，您的 html input 简单易行，您可以添加属性标题
<input name="Username" value="Enter username.." type="text" size="20" maxlength="20" title="enter username">
回答by J.Hendrix
With HTML5, you can now use the placeholder attribute like this:
使用 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>
回答by raghavsood33
This is exactly what you want
这正是你想要的
$(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]
[参考]
回答by sharad kumar singh
I have the same problem, and I have add this code to my application and its work fine for me.
我有同样的问题，我已将此代码添加到我的应用程序中，它对我来说很好用。
step -1 : added the jquery.placeholder.js plugin
第 -1 步：添加 jquery.placeholder.js 插件
step -2 :write the below code in your area.
步骤-2：在您所在的地区编写以下代码。
$(function () {
$('input, textarea').placeholder();
});
And now I can see placeholders on the input boxes!
现在我可以在输入框上看到占位符了！
回答by afaolek
If you mean like a text in the background, I'd say you use a label with the input field and position it on the input using CSS, of course. With JS, you fade out the label when the input receives values and fade it in when the input is empty. In this way, it is not possible for the user to submit the description, whether by accident or intent.
如果您的意思是像背景中的文本，我会说您使用带有输入字段的标签，并使用 CSS 将其放置在输入上，当然。使用 JS，您可以在输入接收值时淡出标签，并在输入为空时淡入标签。通过这种方式，用户不可能无意或有意地提交描述。
回答by harishtps
Define tooltip text
定义工具提示文本
<input type="text" id="firstname" name="firstname" tooltipText="Type in your firstname in this box">
Initialize and configure the script
初始化和配置脚本
<script type="text/javascript">
var tooltipObj = new DHTMLgoodies_formTooltip();
tooltipObj.setTooltipPosition('right');
tooltipObj.setPageBgColor('#EEE');
tooltipObj.setCloseMessage('Exit');
tooltipObj.initFormFieldTooltip();
</script>
