模拟和HTML5的ploceholder的效果

最新推荐文章于 2025-05-19 10:52:17 发布

原创最新推荐文章于 2025-05-19 10:52:17 发布 · 716 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#palceholder #浏览器兼容

前端开发专栏收录该内容

44 篇文章

订阅专栏

本文介绍了一个自定义占位符插件的实现方式，该插件提供了两种模拟方式：value模拟和label模拟，并允许取消支持HTML5浏览器的默认placeholder属性。通过绑定事件监听器，插件能够根据不同状态显示或隐藏占位符文本。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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);
						}
						//创建label
						label = $('<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>