html表单框内文字点击消失,jQuery 使用label实现点击表单input，提示文字消失的示例...

感兴趣的小伙伴，下面一起跟随512笔记的小编罗X来看看吧。

很多网站在填写表单的时候，都可以看到这样一种UI，input[type=text]里面有提示的文字，当鼠标点进去之后提示文字就消失了。以前做这个效果的时候都是用很笨的方法，就是把提示文字写进input的value里，然后在focus的时候去掉，在blur的时候再判断一下input的value是不是空，如果为空再把提示加上去。这样做很笨，不仅代码难看，也不符合“规范”(提示就应该是提示，不应该是input的值)。

有一天在网上发现的一种很容易的做法，下面就介绍一下。先是普通的HTML：

User name

注意这里的label有一个for的属性，这个是必需的，它可以确保点击label的时候，让input获得焦点，因为之后我们要让label定位到input的上方(label与input重叠)。接下来添加样式：

/**

* 点击表单input，提示文字消失

*

* @param

* @arrange (512.笔记) www.512pic.com

**/

.row {

position: relative;

padding: 1px;

}

.row .hint{

opacity: 0.4;

filter:alpha(opacity=40);

padding: 4px 0 0 6px;

position: absolute;

}

.row .textbox {

height: 18px;

outline: none;

border: 1px solid Gray;

padding: 4px 3px 2px;

-webkit-border-radius: 2px

-moz-border-radius: 2px;

}

.focus {

padding: 0;

}

.focus .textbox {

border: 2px solid #7B8AAC;

}这样label就和input重叠起来了。

然后处理用户的操作，当input获得焦点的时候，让label隐藏，失去焦点的时候需要判断一下input的value是不是空值，如果是空值就让label显示出来，下面是JavaScript：

/**

* 点击表单input，提示文字消失

*

* @param

* @arrange (512.笔记) www.512pic.com

**/

$(function() {

$(".textbox").focus(function() {

var self = $(this);

self.closest(".row").addClass("focus");

self.prev().css("display", "none");

}).blur(function() {

var self = $(this);

self.closest(".row").removeClass("focus");

if(self.val() == "") {

self.prev().css("display", "inline");

}

});

});为了方便，这里用到了jQuery。

注：关于jQuery 使用label实现点击表单input，提示文字消失的示例的内容就先介绍到这里，更多相关文章的可以留意512笔记的其他信息。

关键词：input