blocks|key|449444|text|HTML5提供了一个placeholder属性来解决这个特定问题。有关详细信息，请参阅this+link+(JSFiddle)|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|449445|<input+type="text"+placeholder="insert+your+name"+/>|code-block|syntax|javascript|449446|你可以随时提供一个非HTML5javascript回退，就像here解释的那样，或者在None+jquery+placeholder+fallback?中如果你不使用JQuery的话。|449447|entityMap|0|LINK|mutability|MUTABLE|url|http://davidwalsh.name/html5-placeholder|1|http://jsfiddle.net/yuhes/|2|http://www.morethannothing.co.uk/2010/01/placeholder-text-in-html5-a-js-fallback/|3|https://stackoverflow.com/q/7553816/851811^0|A|B|17|9|0|1I|8|1|0|0|U|4|2|17|X|3|0^^$0|@$1|2|3|4|5|6|7|10|8|@$9|11|A|12|B|C]]|D|@$9|13|A|14|1|15]|$9|16|A|17|1|18]]|E|$]]|$1|F|3|G|5|H|7|19|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|1A|8|@]|D|@$9|1B|A|1C|1|1D]|$9|1E|A|1F|1|1G]]|E|$]]|$1|M|3|-4|5|6|7|1H|8|@]|D|@]|E|$]]]|N|$O|$5|P|Q|R|E|$S|T]]|U|$5|P|Q|R|E|$S|V]]|W|$5|P|Q|R|E|$S|X]]|Y|$5|P|Q|R|E|$S|Z]]]]

HTML5 provides a <code>placeholder</code> attribute that addresses this particular issue. See <a href="http://davidwalsh.name/html5-placeholder" rel="nofollow noreferrer">this link</a> for more information (<a href="http://jsfiddle.net/yuhes/" rel="nofollow noreferrer">JSFiddle</a>)

<pre><code>&lt;input type="text" placeholder="insert your name" /&gt;
</code></pre>

You can always provide a non-HTML5 javascript fallback, like the one explained <a href="http://www.morethannothing.co.uk/2010/01/placeholder-text-in-html5-a-js-fallback/" rel="nofollow noreferrer">here</a>, or in <a href="https://stackoverflow.com/q/7553816/851811">None jquery placeholder fallback?</a> if you aren't using JQuery.

blocks|key|231528|text|我认为您正在寻找HTML5表单域占位符...:)|type|unstyled|depth|inlineStyleRanges|entityRanges|data|231529|http://webdesignerwall.com/tutorials/cross-browser-html5-placeholder-text|offset|length|231530|entityMap|0|LINK|mutability|MUTABLE|url^0|0|0|21|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|N|8|@]|9|@$D|O|E|P|1|Q]]|A|$]]|$1|F|3|-4|5|6|7|R|8|@]|9|@]|A|$]]]|G|$H|$5|I|J|K|A|$L|C]]]]

I think you are looking for HTML5 form field placeholder... :)

<a href="http://webdesignerwall.com/tutorials/cross-browser-html5-placeholder-text" rel="nofollow">http://webdesignerwall.com/tutorials/cross-browser-html5-placeholder-text</a>

blocks|key|231552|text|下面是使用HTML5获取占位符的方法：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|231553|<input+id="textfield"+name="textfield"+type="text"+placeholder="enter+something"+/>|code-block|syntax|javascript|231554|编辑：|231555|我不再推荐像我在下面展示的那样，把你自己的polyfills拼凑在一起。首先应该使用Modernizr检测是否需要多边形填充，然后激活满足您需要的多边形填充库。占位符多边形填充listed+in+the+Modernizr+wiki有很好的选择。|offset|length|231556|原件(续)：|231557|为了兼容，下面是一个polyfill：|231558|<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';}">|231559|http://jsfiddle.net/q3V4E/1/|231560|更好的填充方法是在页面加载时运行此脚本，并将占位符放在data-placeholder属性中，因此您的标记如下所示：|231561|<input+id="textfield"+name="textfield"+type="text"+data-placeholder="enter+something">|231562|你的js看起来像这样：|231563|var+inputs+=+document.getElementsByTagName("input");
for+(var+i+=+0;+i+<+inputs.length;+i%2B%2B)+{
++++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');
++++++++}
++++});
}|231564|http://jsfiddle.net/q3V4E/4/|231565|entityMap|0|LINK|mutability|MUTABLE|url|https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills#web-forms-input-placeholder|1|2^0|0|0|0|2G|S|0|0|0|0|0|0|S|1|0|0|0|0|0|0|S|2|0^^$0|@$1|2|3|4|5|6|7|1E|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|1F|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|1G|8|@]|9|@]|A|$]]|$1|I|3|J|5|6|7|1H|8|@]|9|@$K|1I|L|1J|1|1K]]|A|$]]|$1|M|3|N|5|6|7|1L|8|@]|9|@]|A|$]]|$1|O|3|P|5|6|7|1M|8|@]|9|@]|A|$]]|$1|Q|3|R|5|D|7|1N|8|@]|9|@]|A|$E|F]]|$1|S|3|T|5|6|7|1O|8|@]|9|@$K|1P|L|1Q|1|1R]]|A|$]]|$1|U|3|V|5|6|7|1S|8|@]|9|@]|A|$]]|$1|W|3|X|5|D|7|1T|8|@]|9|@]|A|$E|F]]|$1|Y|3|Z|5|6|7|1U|8|@]|9|@]|A|$]]|$1|10|3|11|5|D|7|1V|8|@]|9|@]|A|$E|F]]|$1|12|3|13|5|6|7|1W|8|@]|9|@$K|1X|L|1Y|1|1Z]]|A|$]]|$1|14|3|-4|5|6|7|20|8|@]|9|@]|A|$]]]|15|$16|$5|17|18|19|A|$1A|1B]]|1C|$5|17|18|19|A|$1A|T]]|1D|$5|17|18|19|A|$1A|13]]]]

Here is how you can get a placeholder using HTML5:

<pre><code>&lt;input id="textfield" name="textfield" type="text" placeholder="enter something" /&gt;
</code></pre>

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 <a href="https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills#web-forms-input-placeholder" rel="noreferrer">listed in the Modernizr wiki</a>.

ORIGINAL (contd):

And here is a polyfill for compatibility:

<pre><code>&lt;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';}"&gt;
</code></pre>

<a href="http://jsfiddle.net/q3V4E/1/" rel="noreferrer">http://jsfiddle.net/q3V4E/1/</a>

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:

<pre><code>&lt;input id="textfield" name="textfield" type="text" data-placeholder="enter something"&gt;
</code></pre>

and your js looks like this:

<pre><code>var inputs = document.getElementsByTagName("input");
for (var i = 0; i &lt; 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');
 }
 });
}
</code></pre>

<a href="http://jsfiddle.net/q3V4E/4/" rel="noreferrer">http://jsfiddle.net/q3V4E/4/</a>

blocks|key|449551|text|对于非html5，我推荐一个不错的javascript解决方案，比如toggleval.js+--这让你不必自己做每一个输入域的内联；它将是全局的。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|449552|http://snipplr.com/view/9077/|offset|length|449553|在那之后你要调用的脚本是这样的：|449554|++++<script+type="text/javascript">
++++$(document).ready(function()+{
++++++++//+Input+Box+ToggleVal
++++++++$("input[type=text]").toggleVal();
++++++++$("input[type=password]").toggleVal();
++++});
++++</script>|code-block|syntax|javascript|449555|entityMap|0|LINK|mutability|MUTABLE|url^0|0|0|T|0|0|0|0^^$0|@$1|2|3|4|5|6|7|T|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|U|8|@]|9|@$D|V|E|W|1|X]]|A|$]]|$1|F|3|G|5|6|7|Y|8|@]|9|@]|A|$]]|$1|H|3|I|5|J|7|Z|8|@]|9|@]|A|$K|L]]|$1|M|3|-4|5|6|7|10|8|@]|9|@]|A|$]]]|N|$O|$5|P|Q|R|A|$S|C]]]]

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.

<a href="http://snipplr.com/view/9077/" rel="nofollow">http://snipplr.com/view/9077/</a>

The script you would call to after that would be something like this:

<pre><code> &lt;script type="text/javascript"&gt;
 $(document).ready(function() {
 // Input Box ToggleVal
 $("input[type=text]").toggleVal();
 $("input[type=password]").toggleVal();
 });
 &lt;/script&gt;
</code></pre>

blocks|key|449583|text|非html+5接受的答案的jquery版本：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|449584|++++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'));
++++++++++++}
++++++++});
++++});|code-block|syntax|javascript|449585|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

The jquery version of the non-html 5 accepted answer:

<pre><code> 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'));
 }
 });
 });
</code></pre>

blocks|key|231713|text|更改占位符的颜色可以使用CSS实现：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|231714|::-webkit-input-placeholder+{+/*+Chrome/Opera/Safari+*/
++color:+pink;
}
::-moz-placeholder+{+/*+Firefox+19%2B+*/
++color:+pink;
}
:-ms-input-placeholder+{+/*+IE+10%2B+*/
++color:+pink;
}
:-moz-placeholder+{+/*+Firefox+18-+*/
++color:+pink;
}|code-block|syntax|javascript|231715|来源：https://css-tricks.com/almanac/selectors/p/placeholder/|offset|length|231716|entityMap|0|LINK|mutability|MUTABLE|url|https://css-tricks.com/almanac/selectors/p/placeholder/^0|0|0|3|1J|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|U|8|@]|9|@$I|V|J|W|1|X]]|A|$]]|$1|K|3|-4|5|6|7|Y|8|@]|9|@]|A|$]]]|L|$M|$5|N|O|P|A|$Q|R]]]]

Changing the color of the placeholder can be achieved with CSS:

<pre><code>::-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;
}
</code></pre>

Source: <a href="https://css-tricks.com/almanac/selectors/p/placeholder/" rel="nofollow noreferrer">https://css-tricks.com/almanac/selectors/p/placeholder/</a>

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.

<pre><code>&lt;input id="textfield" name="textfield" type="text" placeholder="correct" /&gt;
</code></pre>

Now i get i second question. How can i change the color of the placeholder?
Here's my text-area:
<a href="http://jsfiddle.net/wy8cP/1/">http://jsfiddle.net/wy8cP/1/</a>

Background text in input type text

HTML5

我认为这是一个简单的问题，但我不知道如何在谷歌上搜索这个问题我需要在输入文本字段中输入背景文本。喜欢:插入你的名字。当我在字段中输入我的名字时，文本消失了好的，谢谢你的解决方案。<input id="textfield" name="textfield" type="text" placeholder="correct...

问输入类型文本中的背景文本
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问输入类型文本中的背景文本EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问输入类型文本中的背景文本
EN