邮箱登陆界面占位符（placeholder）jQuery法

最新推荐文章于 2025-09-03 16:51:19 发布

weixin_30332705

最新推荐文章于 2025-09-03 16:51:19 发布

阅读量307

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/qdmaomao/p/4512181.html

本文详细介绍了HTML5中占位符（placeholder）属性在邮箱登陆页面中的应用，以及如何通过jQuery实现当鼠标聚焦到邮箱文本框时，清空占位符文本的功能。

大家都知道邮箱登陆的时候默认状态下会有文字提醒，当鼠标聚焦到邮箱文本框时，内容文字被会被清空。

html5下有占位符（placeholder）属性，但是兼容不是特别好~下面是jQuery的方法

css代码：

jQuery代码：

$(function(){
        $("#address").focus(function(){ //地址框获得鼠标焦点
            var txt_value=$(this).val(); //得到当前文本框的值
            if(txt_value==this.defaultValue){     //使用defaultValue属性
                $(this).val("");                //如果符合条件，则清空文本框内容
            };
        });

        $("#address").blur(function(){    //地址框失去鼠标焦点
            var txt_value=$(this).val(); //得到当前文本框的值
            if(txt_value==""){
                $(this).val(this.defaultValue); //如果符合条件，则设置内容
            };
        });

});

转载于:https://www.cnblogs.com/qdmaomao/p/4512181.html