基于jQuery的让非HTML5浏览器支持placeholder属性

placeholder 是HTML5的新属性,在做input 的默认值还蛮方便的,但无奈IE系列不支持,因此需要额外做fix。这是google得来的一小段代码让非HTML5浏览器支持placeholder属性,并且不用进行相关的css配置,且支持IE6。

将下面的JS文件上传到你的网站,然后在主题响应的位置如footer部分调用(需要jquery.min.js):

<script src="jquery.placeholder-1.0.js"></script>

对应的JS文件内容如下:

/*!
 * jQuery Placeholder snippet
 *
 * This snippet is written for the purpose of supporting the 
 * HTML5 placeholder attribute on most non-HTML5-compliant browsers.
 * 
 * Usage: Just include it in the code: 
 * and include the HTML5 placeholder attribute in your input or textarea tags.
 * Note: This script should go after client code, if client code sets field's color.
 * 
 * Date: May 2011
 * Author: Otacon (byf1987_at_gmail.com)
 * Version: 1.0
 * jQuery Version: 1.5
 * Changelog: Initial release
 * Tested on: Chrome 10.0; IE6 (IETester); IE8 (IETester)
 * Known Issues: 
 * 	Placeholder for Password is currently not supported
 */

$(function(){
	// -- Constants --
	var PLACE_HOLDER_COLOR = "rgb(169,169,169)"; // "darkGrey" does not work in IE6
	var PLACE_HOLDER_DATA_NAME = "original-font-color";
	
	// -- Util Methods --	
	var getContent = function(element){
		return $(element).val();		
	}

	var setContent = function(element, content){
		$(element).val(content);		
	}
	
	var getPlaceholder = function(element){
		return $(element).attr("placeholder");
	}
	
	var isContentEmpty = function(element){
		var content = getContent(element);
		return (content.length === 0) || content == getPlaceholder(element);
	}
		
	var setPlaceholderStyle = function(element){
		$(element).data(PLACE_HOLDER_DATA_NAME, $(element).css("color"));
		$(element).css("color", PLACE_HOLDER_COLOR);		
	}
	
	var clearPlaceholderStyle = function(element){
		$(element).css("color", $(element).data(PLACE_HOLDER_DATA_NAME));		
		$(element).removeData(PLACE_HOLDER_DATA_NAME);
	}
	
	var showPlaceholder = function(element){
		setContent(element, getPlaceholder(element));
		setPlaceholderStyle(element);	
	}
	
	var hidePlaceholder = function(element){
		if($(element).data(PLACE_HOLDER_DATA_NAME)){
			setContent(element, "");
			clearPlaceholderStyle(element);
		}
	}
	
	// -- Event Handlers --
	var inputFocused = function(){
		if(isContentEmpty(this)){
			hidePlaceholder(this);		
		}
	}
	
	var inputBlurred = function(){
		if(isContentEmpty(this)){
			showPlaceholder(this);
		}
	}
	
	var parentFormSubmitted = function(){
		if(isContentEmpty(this)){
			hidePlaceholder(this);		
		}	
	}
	
	// -- Bind event to components --
	$("textarea, input[type='text']").each(function(index, element){
		if($(element).attr("placeholder")){
			$(element).focus(inputFocused);
			$(element).blur(inputBlurred);
			$(element).bind("parentformsubmitted", parentFormSubmitted);
			
			// triggers show place holder on page load
			$(element).trigger("blur");
			// triggers form submitted event on parent form submit
			$(element).parents("form").submit(function(){
				$(element).trigger("parentformsubmitted");
			});
		}
	});
});

除非特别声明,文章均为牛会飞的博客原创,遵循署名-非商业使用-相同方式共享授权协议
转载请注明出处: https://blogfei.com/jquery-non-html5-browsers-placeholder-attribute/

已有3条评论