20130628-jq插件-placeholder

/*!
 * copyright c by zhangxinxu 2012-02-06
 * jquery.placeholder.js placeholder属性模拟插件
 * v1.0 2012-02-06 create
 * v1.2 2012-12-20 兼容IE10下IE6-IE7，同时jQuery1.4.*版本
 * v1.3 2013-06-14 label元素margin/padding无效问题
*/

(function($, undefined) {
	$.fn.placeholder = function(options) {
		var defaults = {
			labelMode: false,
			labelStyle: {},
			labelAlpha: false,
			labelAcross: false
		};
		var params = $.extend({}, defaults, options || {});

		//方法
		var funLabelAlpha = function(elementEditable, elementCreateLabel) {
			if (elementEditable.val() === "") {
				elementCreateLabel.css("opacity", 0.4).html(elementEditable.data("placeholder"));
			} else {
				elementCreateLabel.html("");	
			}
		}, funPlaceholder = function(ele) {
			// 为了向下兼容jQuery 1.4
			if (document.querySelector) {
				return $(ele).attr("placeholder");	
			} else {
				// IE6, 7
				var ret;
				ret = ele.getAttributeNode("placeholder");
				// Return undefined if nodeValue is empty string
				return ret && ret.nodeValue !== "" ? ret.nodeValue : undefined;	
			}
		};

		$(this).each(function() {
			var element = $(this), isPlaceholder = "placeholder" in document.createElement("input"), placeholder = funPlaceholder(this);

			// 三种情况打酱油
			// ① 没有placeholder属性值
			// ② value模拟，同时是支持placeholder属性的浏览器
			// ③ label模拟，但是无需跨浏览器兼容，同时是支持placeholder属性的浏览器
			if (!placeholder || (!params.labelMode && isPlaceholder) || (params.labelMode && !params.labelAcross && isPlaceholder)) { return; }

			// 存储，因为有时会清除placeholder属性
			element.data("placeholder", placeholder);

			// label模拟
			if (params.labelMode) {			
				var idElement = element.attr("id"), elementLabel = null;
				if (!idElement) {
					idElement = "placeholder" + Math.random();	
					element.attr("id", idElement);
				}

				// 状态初始化
				elementLabel = $('<label for="'+ idElement +'"></label>').css($.extend({
					lineHeight: "1.3",
					position: "absolute",
					color: "graytext",
					cursor: "text",
					marginLeft: element.css("marginLeft"),
					marginTop: element.css("marginTop"),
					paddingLeft: element.css("paddingLeft"),
					paddingTop: element.css("paddingTop")
				}, params.labelStyle)).insertBefore(element);				

				// 事件绑定
				if (params.labelAlpha) {
					// 如果是为空focus透明度改变交互
					element.bind({
						"focus": function() {
							funLabelAlpha($(this), elementLabel);
						},
						"input": function() {
							funLabelAlpha($(this), elementLabel);
						},
						"blur": function() {
							if (this.value === "") {
								elementLabel.css("opacity", 1).html(placeholder);  
							}	
						}
					});	

					//IE6~8不支持oninput事件，需要另行绑定
					if (!window.screenX) {
						element.get(0).onpropertychange = function(event) {
							event = event || window.event;
							if (event.propertyName == "value") {
								funLabelAlpha(element, elementLabel);	
							};	
						}
					}

					// 右键事件
					elementLabel.get(0).oncontextmenu = function() {
						element.trigger("focus");
						return false;	
					}
				} else {
					//如果是单纯的value交互
					element.bind({
						"focus": function() {
							elementLabel.html("");
						},
						"blur": function() {
							if ($(this).val() === "") {
								elementLabel.html(placeholder);	
							}
						}
					});	
				}

				// 内容初始化
				if (params.labelAcross) {
					element.removeAttr("placeholder");	
				}

				if (element.val() === "") {
					elementLabel.html(placeholder);	
				}
			} else {
				// value模拟
				element.bind({
					"focus": function() {
						if ($(this).val() === placeholder) {
							$(this).val("");
						}
						$(this).css("color", "");	
					},
					"blur": function() {
						if ($(this).val() === "") {
							$(this).val(placeholder).css("color", "graytext");    
						}	
					}
				});	

				// 初始化
				if (element.val() === "") {
					element.val(placeholder).css("color", "graytext");      
				}
			}	
		});
		return $(this);
	};	
})(jQuery);

HTML代码：

<p>
    <label for="test1">测试1：</label>
    <input type="text" id="test1" placeholder="这是value模拟" size="26" />
</p>
<p>
    <label for="test2">测试2：</label>
    <input type="text" id="test2" placeholder="这是label普通模拟" size="26" />
</p>
<p>
    测试3：
    <input type="text" class="test3" placeholder="这是label透明度交互模拟" size="26" />
</p>
<p>
    <label for="test4">测试4：</label>
    <input type="text" id="test4" placeholder="这是跨浏览器透明度交互模拟" size="26" />
</p>
<p>
    <label for="test5">测试5：</label>
    <input id="test5" type="text" placeholder="label元素藏于文本框之下" size="26" />
</p>
                

JS代码：

$(function() {
    $("#test1").placeholder();
    $("#test2").placeholder({
        labelMode: true    
    });
    $("#test3").placeholder({
        labelMode: true,
        labelAlpha: true    
    });
    $("#test4").placeholder({
        labelMode: true,
        labelAlpha: true,
        labelAcross: true
    });	
    $("#test5").placeholder({
        labelMode: true,
        labelStyle: {
            margin: "5px 0 0 6px",
            fontSize: "14px"
        },
        labelAlpha: true,
        labelAcross: true
    });	
});
                

关注我

我的微信公众号：前端开发博客，在后台回复以下关键字可以获取资源。

• 回复「小抄」，领取Vue、JavaScript 和 WebComponent 小抄 PDF
• 回复「Vue脑图」获取 Vue 相关脑图
• 回复「思维图」获取 JavaScript 相关思维图
• 回复「简历」获取简历制作建议
• 回复「简历模板」获取精选的简历模板
• 回复「加群」进入500人前端精英群
• 回复「电子书」下载我整理的大量前端资源，含面试、Vue实战项目、CSS和JavaScript电子书等。
• 回复「知识点」下载高清JavaScript知识点图谱

每日分享有用的前端开发知识，加我微信:caibaojian89 交流