CSS3新属性placeholder给表单带来了方便,但是IE8以下并不支持,增加一段JQ代码使得IE8以下浏览器能够像其他浏览器一样,获取placeholder的值,赋给val。
//input placeholder jQuery('[placeholder]').focus(function() { var input = jQuery(this); if (input.val() == input.attr('placeholder')) { input.val(''); input.removeClass('placeholder'); } input.css("color","#555"); }).blur(function() { var input = jQuery(this); if (input.val() == '' || input.val() == input.attr('placeholder')) { input.addClass('placeholder'); input.val(input.attr('placeholder')); input.css("color","#888"); } }).blur().parents('form').submit(function() { jQuery(this).find('[placeholder]').each(function() { var input = jQuery(this); if (input.val() == input.attr('placeholder')) { input.val(''); } }) });
这里可以单独写在一个js文件中,需要用到的地方调用:
<!--[if lte IE 8]> <script type="text/javascript" src="js/IE8.js"></script> <![endif]-->
我加了下颜色变化,使得在IE8下跟其他浏览器基本一样,另外关于password要单独做处理。
相关推荐
而 "jquery-placeholder" 插件是针对那些不支持 HTML5 `placeholder` 属性的浏览器,提供了一个简单易用的解决方案。 ### 2. 使用方法 首先,你需要在项目中引入 jQuery 库和 "jquery-placeholder" 插件的 ...
针对IE浏览器对`placeholder`属性的不兼容问题,开发者通常会采用JavaScript(JS)插件来实现兼容性处理。这些插件通过JavaScript代码模拟`placeholder`的效果,使得在IE浏览器上也能呈现类似的功能。文件名...
2. **兼容性处理**:针对不支持"placeholder"属性的浏览器,如Internet Explorer 9及以下版本,进行兼容性修复。 3. **与Prototype.js或jQuery的集成**:在使用这个polyfill之前,开发者需要确保页面已经加载了...
- 使用条件注释:针对IE8浏览器,可以使用HTML的条件注释来引入特定的CSS或JavaScript文件,以确保在IE8中加载兼容性解决方案。 - 前进兼容(Graceful Degradation):设计时优先考虑现代浏览器,然后逐步降级在旧...
5. 其他浏览器,如IE9和Opera12以下版本不支持修改placeholder的颜色。 在CSS中,修改placeholder颜色的一般语法如下: ```css input::-webkit-input-placeholder { color: #指定的颜色; } input:-moz-...
针对这个问题,"placeholder属性支持所有IE浏览器的插件"应运而生。 这个插件是由智学无忧的老曹亲自编写的,目的是解决IE浏览器对`placeholder`属性的不支持问题。通过巧妙地运用代码封装和闭门技术,该插件能够使...
在描述中,"Fix-placeholder-IE-8-9"进一步强调了这个修复方案是针对这一特定问题的。 "placeholder"属性是HTML5引入的新特性,用于在输入框(`<input>`元素)内提供提示文本,当用户开始输入时,这些文本会自动...
为了确保跨浏览器兼容性,可以通过JavaScript检测浏览器是否支持`placeholder`,并针对不支持的浏览器提供备选方案。如使用MooTools、Dojo或其他JavaScript库来模拟`placeholder`的效果: ```javascript if (!...
`jQuery Placeholder`旨在解决旧版浏览器(如IE9及以下版本)不支持`placeholder`属性的问题。通过使用此插件,你可以确保在所有现代和老式浏览器中都能提供一致的用户体验。 ### 5. 源码分析 通过查看`jquery....
由于`placeholder`属性是HTML5新增的,因此一些较老的浏览器,如IE6和IE8,可能不支持此特性。为了确保在不支持的浏览器中也能提供类似功能,可以使用JavaScript进行检测和补救。以下是一个简单的函数,用于检测...
针对这一问题,文档建议可以在服务器端进行判断处理,以确保即使在不支持placeholder属性的浏览器中也不会出现错误。具体实现方法可能会涉及到后端代码的修改,以适应不同的开发环境和需求。 总之,通过上述插件,...
然而,这个功能在早期版本的Internet Explorer(尤其是IE9以下)中并不支持,这给开发者带来了一定的困扰。为了实现全浏览器的兼容性,我们需要寻找一种解决方案,这就是“placeholder HTML 5 IE 兼容插件”的作用。...
- `:-ms-input-placeholder`: 针对IE10及更高版本的输入框占位符样式。 5. **通用hack**: - `!important`: 这个不是针对特定浏览器的hack,而是用于提高样式优先级。不过,过度使用可能会导致维护困难。 了解...
本文将浅析两个常用的浏览器私有属性:`-moz-user-select`、`::-webkit-input-placeholder` 和 `-moz-placeholder`,以及它们如何影响元素的可选值和input元素的placeholder样式。 一、控制元素的可选值 `-moz-...
针对这个问题,我们来详细探讨`placeholder`属性的使用、浏览器兼容性和解决策略。 首先,`placeholder`属性的语法如下: ```html <input type="text" placeholder="请输入您的姓名"> ``` 在这个例子中,“请输入...
标签中的"jQuery"、"IE"和"兼容"指明了这篇文章讨论的主要技术和目标浏览器,"placeholder"则直接指向了讨论的核心问题,即如何在不支持placeholder属性的IE浏览器中实现它。 在内容部分,作者介绍了两种具体的实现...
此外,foxholder.js还具有良好的浏览器兼容性,它支持现代浏览器,同时也考虑到了对老版本IE的兼容,这使得它能在广泛的用户群体中稳定运行。对于开发者来说,这意味着可以放心地在各种项目中使用此插件,而不必担心...
在处理Flex布局时,不同版本的Android可能不支持`flex-wrap:wrap`,但iOS支持。为确保兼容性,可以使用老版本的Flex语法,或者寻找其他布局替代方案: ```css .box { display: -webkit-box; /* 老版本语法 */ ...
1. IE兼容:由于IE对CSS的支持相对有限,需要使用条件注释或针对IE的特定CSS hack,如`_width`、`*width`等。对于某些老版本的IE,可能还需要借助JavaScript库如jQuery或Modernizr来实现部分功能。 2. FF和OP兼容:...