使用Jquery模拟 Html5 placeholder属性兼容全部浏览器

作者: admin 日期: 2015-07-12 01:25:41 人气: - 评论: 0


placeholderhtml5新增的input的一个熟悉,主要是让表单体验更加智能,相当于value属性,但是他有一个好处就是当我们聚焦输入文本的时候我们在placeholder="默认值"的文本就会自动清空,不过Ie浏览器对这个属性支持并不好还是自己用Jquery封装一个吧,以下代码理论上支持所有浏览器,不过使用这个方法会占用inputvalue属性在表单提交的时候需要判断一下

 

/*  Jquery插件 Start */

       jQuery.fn.setplaceholder=function(placeholderText,Color1,Color2){

            if($(this).val()==""){

               $(this).val(placeholderText);

               $(this).css('color',Color1);

            }else{

               $(this).css('color',Color2);

            }

           $(this).focus(function(){

               if($(this).val()==placeholderText){

                   $(this).val("");

                   $(this).css('color',Color2);

               }

            });

           $(this).blur(function(){

               if($(this).val()=="") {

 

                   $(this).val(placeholderText);

                   $(this).css('color',Color1);

               }

           });

        }

/*  Jquery插件 End */

 

//使用代码

$("#name").setplaceholder("我的称呼","#b4b4b4","#444");

$("#phone").setplaceholder("我的联系方式","#b4b4b4","#444");


发表评论
更多 网友评论0 条评论)
暂无评论

Copyright © 2012-2014 我的代码板 Inc. 保留所有权利。

页面耗时0.0254秒, 内存占用1.86 MB, 访问数据库14次

闽ICP备15009223号-1