码迷,mamicode.com
首页 > Web开发 > 详细

解决HTML5中placeholder属性兼容性的JQuery插件

时间:2014-07-28 19:05:54      阅读:288      评论:0      收藏:0      [点我收藏+]

标签:blog   color   使用   os   io   cti   html   代码   

//调用方法

$(function () {
   $(".pHolder").jason();

  });

//HTML代码

<input type="text" class="pHolder" placeholder="请输入姓名" />

//jquery插件

($.fn.jason = function(a) {
    var b = {
        focus: "black",
        unfocus: "#999"
    }, c = $.extend(b, a);
    return $(this).each(function() {
        if (!$.support.leadingWhitespace||($.browser.msie && $.browser.version < 10)) {//判断ie,如果jQuery版本过高就不能使用后面的判断
            var a = $(this).attr("placeholder");
            $(this).val(a), $(this).css("color", c.unfocus), $(this).focus(function() {
                ($(this).val() == a || "" == $(this).val()) && ($(this).attr("placeholder", ""),
                $(this).val(""), $(this).css("color", c.focus));
            }), $(this).blur(function() {
                ($(this).val() == a || "" == $(this).val()) && ($(this).val(a), $(this).css("color", c.unfocus));
            });
        }
    });
})(jQuery);

解决HTML5中placeholder属性兼容性的JQuery插件,布布扣,bubuko.com

解决HTML5中placeholder属性兼容性的JQuery插件

标签:blog   color   使用   os   io   cti   html   代码   

原文地址:http://www.cnblogs.com/jasonzeng/p/3873086.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!