显示说明（占位符）文本的 Javascript 文本输入字段
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3446269/
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
Javascript text input fields that display instruction (placeholder) text
提问by at.
What's the best way to have a text input field that displays instructions of what to enter in that field in gray. When you focus on that input field, the gray instruction text disappears and your input text appears black. If you erase your input text and focus away from that input, then the instruction gray text reappears.
有一个文本输入字段的最佳方法是什么，该字段以灰色显示在该字段中输入的内容的说明。当您关注该输入字段时，灰色的说明文本会消失，而您的输入文本会显示为黑色。如果您擦除输入文本并将注意力从该输入移开，则说明灰色文本会重新出现。
I've tried implementing this with jQuery, but I get all kinds of weird issues with different browsers. Sometimes when you go back a screen, the instruction text becomes black and no longer disappears, issues like that.
我试过用 jQuery 来实现这个，但是我在不同的浏览器上遇到了各种奇怪的问题。有时，当您返回屏幕时，说明文本会变黑并且不再消失，诸如此类的问题。
Is there a standard javascript library for this? I can't find any!
是否有一个标准的 javascript 库？我找不到任何！
Oh, and the instruction text can't be an image because it has to be available in different languages depending on the browser's language preference.
哦，指令文本不能是图像，因为它必须以不同的语言提供，具体取决于浏览器的语言偏好。
采纳答案by Amit Soni
回答by autonomatt
You don't need javascript for this.
您不需要为此使用 javascript。
HTML5:
HTML5：
<input type="text" id="email" name="email" placeholder="Enter your email address">
This works in modern browsers. If you add modernizr.js to your page then it'll work in all browsers.
这适用于现代浏览器。如果您将 Modernizr.js 添加到您的页面，那么它将适用于所有浏览器。
回答by Reigel
html
html
<input type="text" id="user" class="textbox default" value="Enter login name">
<input type="password" id="pass" class="textbox">
jQuery
jQuery
$(function(){
$('.textbox').focus(function(){
if (this.value == this.defaultValue) {
this.value = '';
$(this).removeClass('default');
};
}).blur(function(){
if (this.value == '') {
this.value = this.defaultValue;
$(this).addClass('default');
};
});?
});
demo
演示
回答by Moin Zaman
Look at this one: http://fuelyourcoding.com/scripts/infield/
回答by ShivarajRH
placeholder code - name
占位符代码 - 名称
name of the variable is,
变量的名称是，
var name=$("#con-name");
var nameval="Enter your name";
name.val(nameval);
name.focus(function(){
if (this.value == nameval ) {
this.value = '';
};
}).blur(function(){
if (this.value == '') {
this.value = nameval;
};
});
//submit to clear code
$("#sub_con_page").click(function() {
if(name.val()==nameval) {
name.val("");
}
});
回答by Quentin
Make the input transparent and put the text behind it. Check the value onload, onblur to decide if the text should be visible or not. Make it invisible onfocus.
使输入透明并将文本放在其后面。检查值 onload、onblur 以决定文本是否应该可见。让它在焦点上不可见。
For example: http://dorward.me.uk/tmp/label-work/example.html(you just need to style the label and input with different foreground colours)
例如：http: //dorward.me.uk/tmp/label-work/example.html（你只需要用不同的前景色设置标签和输入的样式）
回答by PPShein
<input type="text" name="myText" value="Enter Name" style="color:gray" onfocus="this.value=''">
