`

placeholder(HTML 5) IE 兼容插件

阅读更多
placeholder 这个属性被越来越频繁的使用.
但为做HTML 5 特性IE没能实现这东西.
以下的jQuery插件就是用来在IE上实现该属性的.
/**
 * [placeholder(HTML 5) IE 实现.IE9以下通过测试.]
 * v 1.0 by oTwo 2014年7月31日 11:45:29
 */
$.fn.placeholder = function() {
	// 当系统支持 placeholder 时使用系统自带的.
	if ('placeholder' in document.createElement('input')) {
		return;
	}
	this.each(function(index, val) {
		var ele = $(this);

		//创建 显示层
		var div = $('<div>').css({
			"color": "#cccccc",
			"cursor": "text",
			"position": "absolute",
			"display": ele.val() ? 'none' : 'block',
			"zIndex": ele.css('zIndex') == 'auto' ? 'auto' : ele.css('zIndex') - 0 + 1,
			"left": ele.offset().left + 14,
			"top": ele.offset().top,
			"width": ele.outerWidth() - 14,
			"height": ele.outerHeight()
		}).text(ele.attr('placeholder')).appendTo('body');

		//绑定事件
		div.click(function(e) {
			ele.focusin().focus();
		});
		ele.focusin(function() {
			if ($(this).val()) {
				return;
			}
			div.hide();
		});
		ele.focusout(function() {
			if ($(this).val()) {
				return;
			}
			div.show();
		});
	});
	return this;
};

 

分享到:
评论

相关推荐

    IE8 placeholder 兼容使用插件(可兼容password类型input)

    IE8 placeholder 兼容使用插件。可兼容password类型,可以正常显示提示字。

    IE浏览器支持placeholder

    现在流行html5了都,所有的浏览器都支持placeholder,唯独IE不支持,那么这插件将完美解决IE浏览器不兼容input标签的placeholder属性.

    ie8兼容html5 css3圆角阴影渐变placeholder等属性

    几个常用插件,让ie8兼容html5和css的圆角,阴影、渐变、placeholder等属性

    Html5的placeholder属性(IE兼容)实现代码

    HTML5对Web Form做了许多增强,比如input新增的type类型、Form Validation等。 Placeholder是HTML5新增的另一个属性,当input或者textarea设置了该属性后,该值的内容...介绍一个超强的让IE下支持placeholder的属性插件

    在IE8、IE9上实现placeholder效果

    原生手写的IEplaceholder.js插件,能够解决在IE9及以下浏览器上placeholder不能显示的bug,使用时只需要引入该IEplaceholder.js插件,然后获取所有的input节点,最后调用函数iePlaceholder(nodes,color)即可,nodes...

    jquery.placeholder.js

    JS placeholder插件兼容IE6+浏览器 火狐 谷歌浏览器等

    placeholders.jquery.min.js

    解决兼容ie8 无法显示 placeholder 问题插件(jQuery)。

    jplaceholder.js

    如何实现跨浏览器的placeholder效果呢? 附件是我写的一个jquery插件,可以实现兼容IE7,IE8及以上浏览器的placeholder效果

    禅道项目管理软件6.0.stable

    如果大家想升级到6.0版本,请禁用这些不兼容的插件。 7、5.0版本之前的禅道我们都不再支持,请大家尽快升级到最新的版本。 一、修改记录 6.0.beta1的修改记录:http://www.zentao.net/download/79871.html 完成的...

Global site tag (gtag.js) - Google Analytics