当前位置: 代码迷 >> Web前端 >> 让ie支持placeholder(ie10停的ie7模式getAttribute('placeholder')返回null)
  详细解决方案

让ie支持placeholder(ie10停的ie7模式getAttribute('placeholder')返回null)

热度:252   发布时间:2013-08-10 21:14:06.0
让ie支持placeholder(ie10下的ie7模式getAttribute('placeholder')返回null)
现代浏览器都支持placeholder了,目前还有ie6、7、8、9不支持。
上网都能搜到让低版本的ie实现类似placeholder的效果的js代码,一般都是用getAttribute实现,一般都可以兼容ie6、7、8、9了
我一开始也是用原生JS写的,但今天做项目的时候发现一个问题:
部分ie9升级到ie10后,然后再切换为ie7模式时,getAttribute('placeholder')时,会返回null
目前只发现在ie10下的ie7模式有这个bug
后来用JQ来重写这些代码就修复了。

代码如下:
(function($){
	$(document).ready(function() {
		var input = $('.acc_search_form_keyword'),//要实现placeholder的input标签
			defaultValue = input.attr('value'),
			text = input.attr('placeholder'),
			supportPlaceholder = 'placeholder' in document.createElement('input');
			placeholder = function(input,text,defaultValue) {
				if (defaultValue == '') {
					input.attr('value',text);
				}
				input.focus(function(){
					if(input.attr('value') === text){
						$(this).attr('value','');
					}
				});
				input.blur(function(){
					if(input.attr('value') === ''){
						$(this).attr('value',text);
					}
				});
			};
		if (!supportPlaceholder && input.attr('type') === 'text' && text) {
			placeholder(input,text,defaultValue);
		}
	});
})(jQuery)


网上也有人说 使用getAttributeNode得到属性节点,再通过nodeValue得到该属性节点的值 也可以解决,但我没尝试,有兴趣的可以试试
  相关解决方案