Javascript文本输入字段，显示指令（占位符）文本

有一个文本输入字段的最佳方法是什么，该字段显示以灰色显示在该字段中输入内容的说明。 当您关注该输入字段时，灰色指令文本将消失，输入文本将显示为黑色。 如果您删除输入文本并远离该输入，则会再次出现灰色文本说明。

我已经尝试用jQuery实现这个，但是我在不同的浏览器中遇到了各种奇怪的问题。 有时当你回到屏幕时，说明文字会变黑，不再消失，这样的问题。

有没有一个标准的JavaScript库？ 我找不到任何东西！

哦，指令文本不能是图像，因为它必须以不同的语言提供，具体取决于浏览器的语言偏好。

Answer 1

你可以在jquery.use 这个链接中使用水印插件。

例

$(this).Watermark("your instructions"); 

Answer 2

你不需要javascript。

HTML5：

这适用于现代浏览器。 如果您将modernizr.js添加到您的页面，那么它将适用于所有浏览器。

Answer 3

HTML

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'); }; });​ }); 

演示

Answer 4

使输入透明并将文本放在后面。 检查值onload，onblur以确定文本是否可见。 使其在焦点上不可见。

例如： http ： //dorward.me.uk/tmp/label-work/example.html （您只需要设置标签样式并输入不同的前景色）

Answer 5

看看这个： http ： //fuelyourcoding.com/scripts/infield/

Answer 6

占位符代码 – 名称

变量的名称是，

 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(""); } }); 

DEMO LINK

Answer 7