模拟和HTML5的ploceholder的效果

来源：互联网发布：猫知老鼠四川方言版编辑：程序博客网时间：2024/05/21 09:50

1.采用value模拟

2.利用label模拟，让label的for绑定input元素。label覆盖在input元素上。使用label模式模拟占位符的时候，如果文本控件没有id，则插件会自动创建一个随机id.

<script type="text/javascript">(function($,undefined){$.fn.placeholder=function(options){var defaults = {labelMode : false,  //默认false采用value模拟，true采用label模拟labelStyle:{},       //设置label的样式labelAcross : false  //默认false，true让支持HTML5的浏览器取消默认的placeholder属性,统一使用自定义的placeholder属性};var params = $.extend({},defaults,options);$(this).each(function(){var element=$(this);var isPlaceholder = 'placeholder' in document.createElement('input');var placeholder = $(this).attr('placeholder');//element.data("placeholder",placeholder);//让支持HTML5的浏览器取消默认的placeholder属性,统一使用自定义的placeholder属性if(params.labelAcross && isPlaceholder){element.removeAttr("placeholder");isPlaceholder = false;}if(element && (!isPlaceholder) && placeholder){//label模拟if(params.labelMode){var elementId = element.attr('id');var label=null;if(!elementId){elementId = "placeholder"+Math.random();element.attr("id",elementId);}//创建labellabel = $('<label for="'+elementId+'"></label>').css($.extend({position : "absolute",margin : '2px 0 0 3px',color : "grayText",cursor :"text"},params.labelStyle)).insertBefore(element);element.bind({"keyup" : function(){if($(this).val()===''){label.html(placeholder);}else{label.html("")}},"focus" : function(){if($(this).val()===''){label.html(placeholder);}else{label.html("")}},"blur" : function(){if($(this).val()==''){label.html(placeholder).css('color','graytext');}}});//初始化if(element.val()===''){label.html(placeholder).css('color','graytext');}}else{//value模拟element.bind({"focus" : function(){if(element.val()===placeholder){element.css("color", "");}},"blur" : function(){if(element.val()==''){element.val(placeholder).css('color','graytext');}}});//初始化if(element.val()==''){element.val(placeholder).css('color','graytext');}}}});return $(this);};})(jQuery);    </script>

0 0