Html 输入类型文本中的背景文本
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13071791/
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
Background text in input type text
提问by Asad Saeeduddin
I think its a easy question, but i dont know how to search this question in google
我认为这是一个简单的问题，但我不知道如何在谷歌中搜索这个问题
I need a background text in a input-text field. Like: Insert Your Name.
And when i press in to the field to insert my name, the text disappears
我需要输入文本字段中的背景文本。比如：插入你的名字。当我按下该字段以插入我的名字时，文本消失了
Okay, thanks for the solution.
好的，感谢您的解决方案。
<input id="textfield" name="textfield" type="text" placeholder="correct" />
Now i get i second question. How can i change the color of the placeholder? Here's my text-area: http://jsfiddle.net/wy8cP/1/
现在我得到第二个问题。如何更改占位符的颜色？这是我的文本区域：http: //jsfiddle.net/wy8cP/1/
回答by Asad Saeeduddin
Here is how you can get a placeholder using HTML5:
以下是使用 HTML5 获取占位符的方法：
<input id="textfield" name="textfield" type="text" placeholder="enter something" />
EDIT:
编辑：
I no longer recommend hacking together your own polyfills as I showed below. You should use Modernizr to first detect whether a polyfill is needed in the first place, and then activate a polyfill library that fits your needs. There is a good selection of placeholder polyfills listed in the Modernizr wiki.
我不再建议将自己的 polyfill 组合在一起，如下所示。您应该首先使用 Modernizr 检测是否需要一个 polyfill，然后激活一个适合您需要的 polyfill 库。Modernizr wiki 中列出了很多占位符 polyfill 。
ORIGINAL (contd):
原件（续）：
And here is a polyfill for compatibility:
这是一个兼容性的 polyfill：
<input id="textfield" name="textfield" type="text" value="enter something" onfocus="if (this.value == 'enter something') {this.value = '';}" onblur="if (this.value == '') {this.value = 'enter something';}">
A better shim approach is to run this script on page load, and put your placeholders in the data-placeholder attribute, so your markup looks like this:
更好的填充方法是在页面加载时运行此脚本，并将占位符放在 data-placeholder 属性中，因此您的标记如下所示：
<input id="textfield" name="textfield" type="text" data-placeholder="enter something">
and your js looks like this:
你的js看起来像这样：
var inputs = document.getElementsByTagName("input");
for (var i = 0; i < inputs.length; i++) {
inputs[i].value = inputs[i].getAttribute('data-placeholder');
inputs[i].addEventListener('focus', function() {
if (this.value == this.getAttribute('data-placeholder')) {
this.value = '';
}
});
inputs[i].addEventListener('blur', function() {
if (this.value == '') {
this.value = this.getAttribute('data-placeholder');
}
});
}
回答by Xavi López
HTML5 provides a placeholderattribute that addresses this particular issue. See this linkfor more information (JSFiddle)
HTML5 提供了placeholder解决此特定问题的属性。有关更多信息，请参阅此链接（JSFiddle）
<input type="text" placeholder="insert your name" />
You can always provide a non-HTML5 javascript fallback, like the one explained here, or in None jquery placeholder fallback?if you aren't using JQuery.
你总是可以提供一个非 HTML5 javascript 回退，就像这里解释的那样，或者在None jquery placeholder fallback 中？如果您不使用 JQuery。
回答by Pallykuma
I think you are looking for HTML5 form field placeholder... :)
我认为您正在寻找 HTML5 表单字段占位符... :)
http://webdesignerwall.com/tutorials/cross-browser-html5-placeholder-text
http://webdesignerwall.com/tutorials/cross-browser-html5-placeholder-text
回答by willDaBeast
The jquery version of the non-html 5 accepted answer:
非 html 5 接受答案的 jquery 版本：
var inputs = $("input[type='text']", context);
$.each(inputs, function (i, obj) {
$(obj).val($(obj).attr('data-placeholder'));
$(obj).on('focus', function () {
if ($(this).val() == $(this).attr('data-placeholder')) {
$(this).val('');
}
});
$(obj).on('blur', function () {
if ($(this).val() == '') {
$(this).val($(this).attr('data-placeholder'));
}
});
});
回答by JoostS
Changing the color of the placeholder can be achieved with CSS:
可以使用 CSS 来改变占位符的颜色：
::-webkit-input-placeholder { /* Chrome/Opera/Safari */
color: pink;
}
::-moz-placeholder { /* Firefox 19+ */
color: pink;
}
:-ms-input-placeholder { /* IE 10+ */
color: pink;
}
:-moz-placeholder { /* Firefox 18- */
color: pink;
}
Source: https://css-tricks.com/almanac/selectors/p/placeholder/
回答by Andy
For non-HTML5, I suggest a nice javascript solution such as toggleval.js - this allows you not to have to do every input field inline, yourself; it would be global.
对于非 HTML5，我建议使用一个不错的 javascript 解决方案，例如 toggleval.js - 这使您不必自己内联每个输入字段；它将是全球性的。
The script you would call to after that would be something like this:
之后您将调用的脚本将是这样的：
<script type="text/javascript">
$(document).ready(function() {
// Input Box ToggleVal
$("input[type=text]").toggleVal();
$("input[type=password]").toggleVal();
});
</script>
