什么是使文本输入字段显示以灰色输入该字段内容的指令的最佳方式是什么？当您专注于该输入字段时，灰色说明文字消失，输入文字显示为黑色。如果删除输入文本并将注意力从该输入中移开，则会再次显示指令灰色文本。显示指令（占位符）文本的Javascript文本输入字段

我试过用jQuery实现这一点，但我用不同的浏览器得到各种奇怪的问题。有时当你回到屏幕上时，说明文字变黑，不再消失，像这样的问题。

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

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

来源

2010-08-10 at.

您可以使用水印插件在jquery.use this链接。

例如

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

来源

2010-08-10 05:29:07

这是完美的，谢谢！ – 2010-09-07 06:11:49

-2

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

来源

2010-08-10 05:27:17 ppshein

这错过的问题的需求最多，具有可访问性问题。 – Quentin 2010-08-10 05:29:35

这不起作用。因为在你专注于这个领域之后，说明文字永远消失 – 2010-08-10 05:30:15

对不起，伙计们。我虽然错误的方式。 – ppshein 2010-08-10 05:32:51

使输入变为透明并将文本放在后面。检查onload值，onblur以决定文本是否可见。让它在焦点上隐形。

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

来源

2010-08-10 05:27:30 Quentin

我喜欢这个想法。指令文本也是可索引的，这是有道理的。我使用jQuery水印插件，因为它非常简单，并且使得html非常干净。就我所知，他们用相同的机制实现了这一点。 – 2010-09-07 06:13:11

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

来源

2010-08-10 05:35:38 Reigel

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

来源

2010-09-06 22:19:05

爱褪色！也许我会在稍后看看 – 2010-09-07 06:14:53

这个你不需要javascript。

HTML5：

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

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

来源

2011-08-19 13:53:03 autonomatt

据我所知，modernizr只检测当前浏览器中是否存在像占位符这样的html5功能。您需要提供回退机制。上面我选择的jQuery库实际上使用了html5的占位符属性（如果你想要的话）并回退到他们的javascript机制。 – 2011-08-19 16:43:16

占位符码 - 变量的名称

名字，

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

来源

2012-06-11 06:19:45 ShivarajRH

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

回答

HTML

jQuery的

demo

相关问题