【问题标题】：Javascript text input fields that display instruction (placeholder) text显示指令（占位符）文本的 Javascript 文本输入字段
【发布时间】：2011-03-27 15:39:40
【问题描述】：

有一个文本输入字段以灰色显示在该字段中输入内容的说明的最佳方式是什么。当您专注于该输入字段时，灰色的说明文本会消失，您的输入文本会显示为黑色。如果您擦除输入文本并将焦点从该输入移开，则说明灰色文本会重新出现。

我试过用 jQuery 来实现它，但是我在不同的浏览器上遇到了各种奇怪的问题。有时当你返回一个屏幕时，说明文字会变成黑色并且不再消失，诸如此类的问题。

是否有用于此的标准 JavaScript 库？我找不到！

哦，说明文本不能是图像，因为它必须根据浏览器的语言偏好以不同的语言提供。

【问题讨论】：

标签： javascript jquery forms input textfield

【解决方案1】：

占位符代码 - 名称

变量名是，

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

【讨论】：

【解决方案2】：

你不需要 javascript。

HTML5：

<input type="text" id="email" name="email" placeholder="Enter your email address">

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

【讨论】：

据我了解，modernizr 仅检测当前浏览器中是否存在诸如占位符之类的 html5 功能。由您来提供回退机制。上面我选择作为正确答案的 jquery 库实际上使用了 html5 的占位符属性（如果需要）并回退到他们的 javascript 机制。

【解决方案3】：

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

【讨论】：

喜欢褪色！也许我稍后会调查一下

【解决方案4】：

html

<input type="text" id="user" class="textbox default" value="Enter login name">
<input type="password" id="pass" class="textbox">

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

【讨论】：

【解决方案5】：

你可以在jquery中使用水印插件。使用this链接。

例子

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

【讨论】：

【解决方案6】：

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

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

【讨论】：

我喜欢这个主意。说明文本也是可索引的，这很有意义。不过我还是选择了 jQuery 水印插件，因为它非常简单，而且 html 也很干净。据我所知，他们使用相同的机制实现了这一点..

【解决方案7】：

<input type="text" name="myText" value="Enter Name" style="color:gray" onfocus="this.value=''">

【讨论】：

这错过了问题中的大部分要求并且存在可访问性问题。
这行不通。因为在你关注这个领域之后，说明文字就永远消失了