javascript 文本作为文本框输入的占位符？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8354228/
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
Text as place holder for textbox input?
提问by Hoàng Long
I notice that at some websites like http://academia.edu/, the signup form has some "place-holder" in their text input field. Such that in a textbox, there's no label but a rather slight font "First name" word inside the text box.
我注意到在像http://academia.edu/这样的网站上，注册表单的文本输入字段中有一些“占位符”。这样在文本框中，文本框中没有标签，只有一个相当轻微的字体“名字”字样。
When using Firebug to investigate, I see the following code:
使用 Firebug 进行调查时，我看到以下代码：
<input class="standard_text magic-default magic-default-on" id="user_first_name" name="user[first_name]" size="30" type="text" value="First Name">
It looks like there's some "magic" javascript happen behind the scene. But since I'm not familiar with javascript debugging yet, I can't trace out how they do that yet.
看起来幕后发生了一些“神奇”的javascript。但由于我还不熟悉 javascript 调试，我还无法弄清楚他们是如何做到的。
Does anyone know how to produce that effect?
有谁知道如何产生这种效果？
回答by Jamie Dixon
For modern browsers you can use the HTML5 placeholderattribute.
对于现代浏览器，您可以使用 HTML5placeholder属性。
This will achieve the result you're after without any Javascript and will scale (won't do anything) in older browsers.
这将在没有任何 Javascript 的情况下实现您想要的结果，并且将在旧浏览器中扩展（不会做任何事情）。
<input placeholder="First Name">
To get this working in older browsers you can include a little bit of jQuery:
要在旧浏览器中使用它，您可以包含一些 jQuery：
$('input:text').focus(function(){
if ( $( this ).val () === $( this ).attr ( 'placeholder' ) ) {
$(this).val('');
}
}).blur(function(){
if($(this).val() == "")
{
$(this).val($(this).attr('placeholder'))
}
}
);
回答by Jan Han?i?
You have to create a "onFocus" event handler for the input box, and clear the value of said input box. Off course you only clear the value if it's the default value ("First Name" in your example), so that you don't clear away whatever user entered if he returns to the input later.
您必须为输入框创建一个“onFocus”事件处理程序，并清除所述输入框的值。当然，如果它是默认值（在您的示例中为“名字”），则您只会清除该值，这样如果用户稍后返回输入，您就不会清除任何用户输入的内容。
You could also attach a "onBlur" event handler, and restore the value of the input box back to the default value (if user didn't enter anything).
您还可以附加一个“onBlur”事件处理程序，并将输入框的值恢复为默认值（如果用户没有输入任何内容）。
回答by zuloo
<input id="user_first_name" name="user[first_name]" size="30" type="text" value="First Name" onFocus="inputFocus('First Name', this)" onBlur="inputBlur('First Name', this)">
<script type="text/javascriptt">
function inputFocus(ph, el){
if(el.value == ph)
el.value = "";
}
function inputBlur(ph, el){
if(el.value == "")
el.value = ph;
}
</script>
回答by anders
HTML5 placeholder is what you're looking for:
HTML5 占位符正是您要找的：
http://diveintohtml5.info/forms.html
http://diveintohtml5.info/forms.html
In your case it would be:
在您的情况下，它将是：
<input name="firstname" placeholder="First name">
But also you can do it 100% with javascript:
但你也可以 100% 使用 javascript：
http://lab.dotjay.co.uk/experiments/forms/input-placeholder-text/
http://lab.dotjay.co.uk/experiments/forms/input-placeholder-text/
