HTML5新加的Placeholder属性可以很方便的代替之前用onfocus,onblur的方法,并且比它更强大,
但是万恶的IE8却不兼容。
可以使用JavaScript来解决IE8兼容问题,在IE8下,自动替换成onfocus方法,
在支持HTML5的浏览器中则还是用Placeholder,不干扰。
首先需要添加jQuery
如果你的网站已经添加了jQuery,请忽略这一部。
在网站Head标签内添加:
<script type="text/javascript" src="http://code.jquery.com/jquery-1.5.2.min.js">
</script>
添加js代码
将以下代码添加到</body>之前的任意位置:
<script type="text/javascript">
if( !('placeholder' in document.createElement('input')) ){
$('input[placeholder],textarea[placeholder]').each(function(){
var that = $(this),
text= that.attr('placeholder');
if(that.val()===""){
that.val(text).addClass('placeholder');
}
that.focus(function(){
if(that.val()===text){
that.val("").removeClass('placeholder');
}
})
.blur(function(){
if(that.val()===""){
that.val(text).addClass('placeholder');
}
})
.closest('form').submit(function(){
if(that.val() === text){
that.val('');
}
});
});
}
</script>
分享到:
相关推荐
标签“js placeholder IE兼容”进一步确认了我们讨论的主题,即使用JavaScript来处理`placeholder`属性的IE兼容性问题。JavaScript可以用来检测浏览器类型和版本,然后在不支持`placeholder`属性的IE浏览器中动态...
为了解决这个问题,我们可以利用jQuery库来实现对IE的兼容性支持。jQuery是一款强大的JavaScript库,它提供了一套简洁的API,能够简化DOM操作、事件处理以及Ajax交互等任务。对于`placeholder`属性的支持,我们可以...
然而,在IE6、7、8中,我们需要使用JavaScript或者特定的库来模拟这个效果。 一种常见的解决方案是使用jQuery的插件,如`jquery.placeholder.js`。首先,确保引入jQuery库和该插件: ```html ...
需要注意的是,虽然`jquery-placeholder`解决了IE8的`placeholder`问题,但随着浏览器的更新迭代,IE8等老旧浏览器的市场份额已经显著下降。因此,在现代项目中,我们更倾向于使用支持`placeholder`的现代浏览器,...
在IE7中,这些`input`元素将不会显示`placeholder`文本,除非我们用JavaScript对其进行处理。 `jquery-1.10.2.min.js`是jQuery的核心库,它是`jquery.placeholder.min.js`插件运行的基础。jQuery是一个广泛使用的...
总的来说,处理IE8的`placeholder`兼容问题主要依赖于JavaScript和jQuery插件,通过这些方法,我们可以使旧版浏览器也能享受到现代Web开发带来的便利性。尽管现在大部分用户都已经升级到更现代的浏览器,但在某些...
针对IE浏览器对`placeholder`属性的不兼容问题,开发者通常会采用JavaScript(JS)插件来实现兼容性处理。这些插件通过JavaScript代码模拟`placeholder`的效果,使得在IE浏览器上也能呈现类似的功能。文件名...
总结起来,解决IE浏览器不支持`placeholder`属性的问题主要依赖于JavaScript,通过监听输入框的焦点和失去焦点事件来模拟`placeholder`的效果。同时,可以结合Bootstrap的样式来优化视觉体验。无论选择哪种方法,都...
最后,`jplaceholder.js`很可能是专为解决`placeholder`兼容性问题编写的jQuery插件。这个插件会在页面加载完成后,遍历所有`input`元素,检查它们是否具有`placeholder`属性。对于那些不支持`placeholder`的浏览器...
许多jQuery插件如html5shiv-responsive-images、jquery.placeholder等专门用于解决IE浏览器的HTML5兼容问题。 4. **条件注释**: IE浏览器特有的条件注释允许我们针对不同版本的IE插入特定的CSS或JS代码。例如,我们...
总的来说,"placeholderfriend.js"插件为开发者提供了一种便捷的方式来解决IE浏览器对`placeholder`属性的支持问题,使得在旧版IE中也能享受到与现代浏览器相似的用户体验。通过理解其工作原理和使用方法,我们可以...
在实际开发中,考虑到性能和代码维护性,现代项目更倾向于使用成熟的库,如`jQuery.placeholder`或`Modernizr.input.placeholder`等,这些库已经被广泛测试,可以更好地处理各种浏览器兼容性问题。但了解这些插件的...
以上是解决"ie8以下浏览器不兼容jQuery"问题的一些常见方法。在实际开发中,根据项目需求和用户群体,可能需要权衡性能、兼容性和维护成本,选择最合适的解决方案。同时,随着技术的发展,逐渐放弃对过时浏览器的...
需要注意的是,虽然这个方法可以解决`placeholder`的兼容问题,但可能不适用于所有复杂场景,例如表单验证和动态创建的输入元素。对于更复杂的情况,可能需要进一步定制代码或寻找更全面的jQuery插件,如`jquery....
总的来说,这个jQuery插件是一个解决浏览器兼容性问题的实用工具,使得在老版本的IE浏览器上也能实现HTML5的placeholder效果,从而提高用户体验。通过学习和使用这个插件,开发者可以更好地理解和掌握如何利用jQuery...
在IE8及以下版本,我们可以使用传统的JavaScript或者jQuery来模拟`placeholder`效果。一种常见的方法是监听`focus`和`blur`事件。当用户聚焦到输入框时,如果输入框内仍有默认提示文字,就将其清除;当用户离开...
在给定的文件中,提供了一个实现placeholder功能的JavaScript对象以及使用jQuery进行操作的示例代码。 首先,我们需要创建一个包含多个函数的对象(在示例中命名为var placeholder),这些函数能够处理不同的交互...
本文将详细介绍两种利用jQuery库快速解决input中placeholder值在IE浏览器中无法支持的方法。首先,了解在IE中placeholder无法显示的原因是IE 9以下的版本不支持该属性。为此,需要采用JavaScript脚本来模拟这一功能...