模拟placeholder效果代码,Js代码库,德仔网

代码语言

代码分类

【Js】模拟placeholder效果

作者: / 发布于2016/3/23/ 570

由于有的浏览器不支持placeholder，所以写了一个jquery插件来模拟placeholder效果。使用方法：$("#IDName").placeholder();

(function($){
    $.fn.placeholder = function(){
        //判断文本框中的值是否和placeholder中的值一样
        //如果一样，则返回true
        function valueIsPlaceholder(input){
            return ($(input).val() == $(input).attr("placeholder"));
        }
        return this.each(function(){
            $(this).find(":input").each(function(){
                if($(this).attr("type")=="password"){
                    var new_field = $("");
                    new_field.attr("rel",$(this).attr("id"));
                    new_field.attr("value",$(this).attr("placeholder"));
                    $(this).parent().append(new_field);
                    new_field.hide();
                     
                    function showPasswordPlaceholer(input){
                        if($(input).val()=="" || valueIsPlaceholder(input)){
                            $(input).hide();
                            $("input[rel="+$(input).attr('id')+"]").show();
                        }
                    }
                     
                    new_field.focus(function(){
                        $(this).hide();
                        $('input#'+$(this).attr("rel")).show().focus();
                    });
                     
                    $(this).blur(function(){
                        showPasswordPlaceholer(this);
                    });
                     
                    showPasswordPlaceholer(this);
                }else{
                    function showPlaceholder(input, reload){
                        if($(input).val()=="" || (reload && valueIsPlaceholder(input))){
                            $(input).val($(input).attr("placeholder"));
                        }
                    }
                     
                    $(this).focus(function(){
                        if(valueIsPlaceholder(this)){
                            $(this).val('');
                        }
                    });
                     
                    $(this).blur(function(){
                        showPlaceholder(this, false);
                    });
                     
                    showPlaceholder(this, true);
                }
            });
 
        });
    }
})(jQuery);

评论列表

本站所提供的代码，版权归原作者所有，若有侵犯作者版权，请与我们联系，我们将立即删除或修改。谢谢!
本站所有代码发布及提供者。

试试其它关键字

同语言下

可能有用的

贡献的其它代码Label