`
fengzifz
  • 浏览: 3811 次
最近访客 更多访客>>
社区版块
存档分类
最新评论

让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得到该属性节点的值 也可以解决,但我没尝试,有兴趣的可以试试
分享到:
评论

相关推荐

    解决IE下不支持placeholder属性

    然而,对于老旧的Internet Explorer(IE)浏览器,尤其是低于IE10的版本,它们并不原生支持`placeholder`属性。这使得在这些浏览器上,用户无法看到预期的提示信息,降低了用户体验。本篇文章将深入探讨如何在IE浏览...

    IE兼容placeholder js

    描述中提到的“完美兼容H5 placeholder属性在IE9及以下版本的问题”,意味着这个解决方案能够有效地在不支持`placeholder`属性的IE浏览器上模拟出相同的效果。"自测可用,修改点少"表示这个解决方案经过了实际测试,...

    IE7 浏览器处理 兼容 input placeholder.zip

    标题中的"IE7浏览器处理兼容input placeholder"是指如何在不支持`placeholder`属性的IE7浏览器中模拟这一功能。这个问题的解决方案通常依赖于JavaScript库,例如在给定的压缩包中包含的`jquery.placeholder.min.js`...

    IE浏览器支持placeholder

    文件名"placeholder"可能指的是一个这样的JS插件,它的作用是为IE浏览器提供`placeholder`的支持。 在编写这样的兼容性插件时,开发者需要考虑以下几点: 1. **检测浏览器兼容性**:首先,插件需要检测当前用户...

    IE9支持placeholder

    这里面是一个支持IE9以及IE9一下的兼容支持placeholder的javascript案例。本示例是争对textarea写的,修改后可以争对input。另外textarea只需要添加一个name="textarea" 即可实现。需要实现input支持的,需要修改三...

    IE8支持的placeholder组件

    在互联网技术日新月异的时代,对于老旧浏览器的兼容性问题始终是开发者们需要面对的挑战之一。"IE8支持的placeholder组件"就是一个...然而,对于仍需支持IE8的项目,`jquery-placeholder`无疑是一个可靠的解决方案。

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

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

    在IE8、IE9上实现placeholder效果

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

    input中placeholder在Ie上兼容

    在现代浏览器中,`placeholder`属性被广泛支持,但在较旧版本的IE(主要是IE9及以下)中并不支持。 为了解决这个问题,我们可以利用jQuery库来实现对IE的兼容性支持。jQuery是一款强大的JavaScript库,它提供了一套...

    ie6 7 8兼容html5属性placeholder

    总结起来,为了让IE6、7、8兼容HTML5的`placeholder`属性,可以采用以下步骤: 1. 使用jQuery插件(如`jquery.placeholder.js`)或编写JavaScript代码来模拟`placeholder`行为。 2. 为不支持`placeholder`的浏览器...

    IE下实现placeholder效果的jquery插件

    本篇将详细介绍如何使用一个名为"placeholderfriend.js"的jQuery插件,在IE浏览器下实现`placeholder`效果。 首先,我们来看`placeholderfriend.js`插件的基本原理。这个插件的工作机制是通过监听页面加载和输入框...

    jquery插件解决IE6到IE9版本不支持placeholder的问题(包括网页含多个password的特殊处理)

    jquery插件解决IE6到IE9版本不支持placeholder的问题,支持同一个网页包含多个password input的版本。用法:下载插件并引用,将插件代码里面的login-input改成自己的密码input输入框的样式即可。

    解决IE8之前浏览器不支持placeholder属性的问题

    placeHolder是html5加入的新属性,此代码基于jQuery实现placeholder属性功能。

    input的placeholder属性兼容ie8 优化版

    然而,这个特性在早期的 Internet Explorer 版本,尤其是 IE8 和 IE9,是不被支持的。为了实现对这些浏览器的兼容性,我们需要采用一些技巧。 `placeholder` 属性的原生支持始于 HTML5,因此,对于那些不支持 ...

    placeholder效果的jQuery插件,支持IE6、IE7

    标题中的“placeholder效果的jQuery插件,支持IE6、IE7”指的是一个专门用于处理HTML5 placeholder属性的jQuery扩展,这个插件使得在不支持HTML5的旧版Internet Explorer(如IE6和IE7)中也能实现类似的功能。...

    ie8兼容placeholder.zip

    在早期的网页开发中,IE8...尽管现在大部分用户都已经升级到更现代的浏览器,但在某些环境下,尤其是企业内部系统,仍然需要关注对IE8的支持。了解并掌握这些兼容性技巧,对于提升用户体验和保证项目顺利进行至关重要。

    处理IE不兼容placeholder的JS文件

    处理IE不兼容placeholder的JS文件

    实现跨浏览器的placeholder,兼容IE7

    然而,这个功能在旧版本的浏览器,尤其是Internet Explorer (IE)的早期版本(如IE7)中并未得到支持。为了实现跨浏览器的`placeholder`兼容性,开发者通常需要借助JavaScript库或jQuery插件来模拟这一功能。本篇将...

    javascript版placeholder解决一些浏览器不支持placeholder属性的问题

    标题"javascript版placeholder解决一些浏览器不支持placeholder属性的问题"指的就是通过JavaScript来模拟`placeholder`的效果,确保在不支持此属性的浏览器中也能正常使用。下面我们将深入探讨如何使用JavaScript...

Global site tag (gtag.js) - Google Analytics