显示指令(占位符)文本的Javascript文本输入字段
什么是使文本输入字段显示以灰色输入该字段内容的指令的最佳方式是什么?当您专注于该输入字段时,灰色说明文字消失,输入文字显示为黑色。如果删除输入文本并将注意力从该输入中移开,则会再次显示指令灰色文本。显示指令(占位符)文本的Javascript文本输入字段
我试过用jQuery实现这一点,但我用不同的浏览器得到各种奇怪的问题。有时当你回到屏幕上时,说明文字变黑,不再消失,像这样的问题。
这是否有一个标准的JavaScript库?我找不到任何东西!
噢,指令文本不能是图像,因为它必须根据浏览器的语言偏好以不同的语言提供。
使输入变为透明并将文本放在后面。检查onload值,onblur以决定文本是否可见。让它在焦点上隐形。
例如:http://dorward.me.uk/tmp/label-work/example.html(你只需要样式标签和输入不同的前景颜色)
我喜欢这个想法。指令文本也是可索引的,这是有道理的。我使用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
这个你不需要javascript。
HTML5:
<input type="text" id="email" name="email" placeholder="Enter your email address">
这工作在现代浏览器。如果您将modernizr.js添加到您的页面,那么它将适用于所有浏览器。
据我所知,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("");
}
});
这是完美的,谢谢! – 2010-09-07 06:11:49