Javascript 你能用 CSS 在 HTML 文本框中显示灰色提示吗？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3801120/
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
Can you you show a grey hint in an HTML text box with CSS alone?
提问by Steve Bennett
You see these text input boxes from time to time on the web: a grey label is shown inside the box, but once you type there, the grey text disappears. This page even has one: the "Title" field behaves exactly like that.
您不时会在网络上看到这些文本输入框：框内显示一个灰色标签，但是一旦您在那里输入，灰色文本就会消失。该页面甚至有一个：“标题”字段的行为与此完全相同。
So, questions:
所以，问题：
Is there a standard term for this? I'm really struggling to find anything on google
Can it be done with just CSS?
Failing that, can it be done with localised JavaScript? (ie, code just within the tag, not in the HTML header).
这有标准术语吗？我真的很难在谷歌上找到任何东西
可以只用 CSS 来完成吗？
如果做不到这一点，可以使用本地化的 JavaScript 来完成吗？（即，代码仅在标记内，而不是在 HTML 标头中）。
采纳答案by Steve Bennett
The "placeholder"attribute is now supportedacross all major browsers.
<form>
<input type="text" placeholder="placeholder text">
</form>?
Styling it still seems to require vendor prefixes:
样式化它似乎仍然需要供应商前缀：
input::-webkit-input-placeholder {
color: #59e;
}
input:-moz-placeholder {
color: #59e;
}
?
Seen here: http://jsfiddle.net/webvitaly/bGrQ4/2/
回答by AaronM
I don't know of a way to do it with CSS. But looking at the page source, SO is doing it thusly-wise:
我不知道有什么方法可以用 CSS 做到这一点。但是查看页面源代码，所以这样做是明智的：
<input name="q" class="textbox" tabindex="1"
onfocus="if (this.value=='search') this.value = ''"
type="text" maxlength="80" size="28" value="search">
The middle line starting with "onfocus" is where the work is happening. When the text field gets focus, it checks to see if the default value ("search") is there. If so, it sets the value to '' (empty string). Otherwise, the text is unaffected.
以“onfocus”开头的中间线是工作发生的地方。当文本字段获得焦点时，它会检查是否存在默认值（“搜索”）。如果是，它将值设置为 ''（空字符串）。否则，文本不受影响。
One potential issue here is that if someone is trying to search for the word "search", then clicks outside of the box and clicks back in again, the text gets reset. Not a huge issue, but something to keep in mind as you're working.
这里的一个潜在问题是，如果有人尝试搜索“搜索”一词，然后在框外单击并再次单击，则文本将被重置。这不是一个大问题，但在您工作时要记住一些事情。
回答by fanbondi
The standard name is watermark input.
标准名称是水印输入。
follow this page if you are interested in JQuery http://digitalbush.com/projects/watermark-input-plugin/
如果您对 JQuery 感兴趣，请关注此页面 http://digitalbush.com/projects/watermark-input-plugin/
回答by Yi Jiang
If you want this with HTML + CSS only, you can try using the new HTML5 placeholderinput attribute. Unfortunately this attribute is not widely supported, so try using a script such as Modernizrto detect browser support for this feature for a feature such as this.
如果你想这跟HTML + CSS只，你可以尝试使用新的HTML5placeholder输入属性。不幸的是，此属性并未得到广泛支持，因此请尝试使用诸如Modernizr 之类的脚本来检测浏览器对此类功能的此功能的支持。
I would not recommend using inline Javascript for this - it's bad practice and goes against the principle of separation of content and behavior. Using jQuery, for instance, something like this will work:
我不建议为此使用内联 Javascript - 这是不好的做法，并且违背了内容和行为分离的原则。例如，使用 jQuery，类似这样的事情会起作用：
var input = $('input[name="search"]');
var placeHolder = input.attr('placeholder');
input.val(placeHolder);
input.focus(function(){
this.value = '';
}).blur(function(){
if(this.value === '') this.value = placeHolder;
});
回答by Amiga500Kid
There's an HTML built-in for new browsers.
新浏览器内置了 HTML。
Just use the "placeholder" attribute:
只需使用“占位符”属性：
< input id="inputbox" type="text" placeholder="Hint Text Here" >
< input id="inputbox" type="text" placeholder="提示文本在这里">
回答by Raijin_x-u
You've probably already found the answer you are looking for but for others this may help
您可能已经找到了您正在寻找的答案，但对其他人来说这可能会有所帮助
<script>
function inputFocus(i){
if(i.value==i.defaultValue){ i.value=""; i.style.color="#000"; }
}
function inputBlur(i){
if(i.value==""){ i.value=i.defaultValue; i.style.color="#888"; }
}
</script>
...
...
<input type ="text"onfocus="inputFocus(this)" onblur="inputBlur(this)" value="Some Text"/>
hope this helps
希望这可以帮助
回答by alex
- I call them input labels. don't know if it is a standard
- Nope - you could if they were allowed child elements like so
- 我称它们为输入标签。不知道是不是标准
- 不 - 如果他们被允许像这样的子元素，你可以
input {
position: relative;
}
input label {
position: absolute;
top: 0;
left: 0;
}
input:focus label {
display: none;
}
But you can't have children of inputs (AFAIK), so it won't work.
但是你不能有输入的孩子（AFAIK），所以它不会工作。
- Yes, see the link above (using jQuery, but trivially done without)
- 是的，请参阅上面的链接（使用 jQuery，但没有完成）
