`
darepanhf
  • 浏览: 5809 次
  • 性别: Icon_minigender_2
  • 来自: 南京
社区版块
存档分类
最新评论

针对IE8以下不支持input-placeholder 属性

    博客分类:
  • JS
 
阅读更多

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:一个简单的 jQuery 占位符插件

    而 "jquery-placeholder" 插件是针对那些不支持 HTML5 `placeholder` 属性的浏览器,提供了一个简单易用的解决方案。 ### 2. 使用方法 首先,你需要在项目中引入 jQuery 库和 "jquery-placeholder" 插件的 ...

    IE浏览器支持placeholder

    针对IE浏览器对`placeholder`属性的不兼容问题,开发者通常会采用JavaScript(JS)插件来实现兼容性处理。这些插件通过JavaScript代码模拟`placeholder`的效果,使得在IE浏览器上也能呈现类似的功能。文件名...

    前端项目-placeholder-shiv.zip

    2. **兼容性处理**:针对不支持"placeholder"属性的浏览器,如Internet Explorer 9及以下版本,进行兼容性修复。 3. **与Prototype.js或jQuery的集成**:在使用这个polyfill之前,开发者需要确保页面已经加载了...

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

    - 使用条件注释:针对IE8浏览器,可以使用HTML的条件注释来引入特定的CSS或JavaScript文件,以确保在IE8中加载兼容性解决方案。 - 前进兼容(Graceful Degradation):设计时优先考虑现代浏览器,然后逐步降级在旧...

    HTML5 input placeholder 颜色修改示例

    5. 其他浏览器,如IE9和Opera12以下版本不支持修改placeholder的颜色。 在CSS中,修改placeholder颜色的一般语法如下: ```css input::-webkit-input-placeholder { color: #指定的颜色; } input:-moz-...

    placeholder属性支持所有IE浏览器的插件

    针对这个问题,"placeholder属性支持所有IE浏览器的插件"应运而生。 这个插件是由智学无忧的老曹亲自编写的,目的是解决IE浏览器对`placeholder`属性的不支持问题。通过巧妙地运用代码封装和闭门技术,该插件能够使...

    Fix-placeholder-IE-8---9:修复Internet Explorer 8和9的占位符

    在描述中,"Fix-placeholder-IE-8-9"进一步强调了这个修复方案是针对这一特定问题的。 "placeholder"属性是HTML5引入的新特性,用于在输入框(`&lt;input&gt;`元素)内提供提示文本,当用户开始输入时,这些文本会自动...

    HTML5 placeholder属性详解

    为了确保跨浏览器兼容性,可以通过JavaScript检测浏览器是否支持`placeholder`,并针对不支持的浏览器提供备选方案。如使用MooTools、Dojo或其他JavaScript库来模拟`placeholder`的效果: ```javascript if (!...

    jquery-placeholder

    `jQuery Placeholder`旨在解决旧版浏览器(如IE9及以下版本)不支持`placeholder`属性的问题。通过使用此插件,你可以确保在所有现代和老式浏览器中都能提供一致的用户体验。 ### 5. 源码分析 通过查看`jquery....

    HTML5里的placeholder属性使用实例和美化显示效果的方法

    由于`placeholder`属性是HTML5新增的,因此一些较老的浏览器,如IE6和IE8,可能不支持此特性。为了确保在不支持的浏览器中也能提供类似功能,可以使用JavaScript进行检测和补救。以下是一个简单的函数,用于检测...

    让IE下支持Html5的placeholder属性的插件

    针对这一问题,文档建议可以在服务器端进行判断处理,以确保即使在不支持placeholder属性的浏览器中也不会出现错误。具体实现方法可能会涉及到后端代码的修改,以适应不同的开发环境和需求。 总之,通过上述插件,...

    placeholder(HTML 5) IE 兼容插件

    然而,这个功能在早期版本的Internet Explorer(尤其是IE9以下)中并不支持,这给开发者带来了一定的困扰。为了实现全浏览器的兼容性,我们需要寻找一种解决方案,这就是“placeholder HTML 5 IE 兼容插件”的作用。...

    CSS hack浏览器兼容一览表

    - `:-ms-input-placeholder`: 针对IE10及更高版本的输入框占位符样式。 5. **通用hack**: - `!important`: 这个不是针对特定浏览器的hack,而是用于提高样式优先级。不过,过度使用可能会导致维护困难。 了解...

    浅析常用的浏览器私有属性

    本文将浅析两个常用的浏览器私有属性:`-moz-user-select`、`::-webkit-input-placeholder` 和 `-moz-placeholder`,以及它们如何影响元素的可选值和input元素的placeholder样式。 一、控制元素的可选值 `-moz-...

    input点击后placeholder中的提示消息消失

    针对这个问题,我们来详细探讨`placeholder`属性的使用、浏览器兼容性和解决策略。 首先,`placeholder`属性的语法如下: ```html &lt;input type="text" placeholder="请输入您的姓名"&gt; ``` 在这个例子中,“请输入...

    两种方法基于jQuery实现IE浏览器兼容placeholder效果

    标签中的"jQuery"、"IE"和"兼容"指明了这篇文章讨论的主要技术和目标浏览器,"placeholder"则直接指向了讨论的核心问题,即如何在不支持placeholder属性的IE浏览器中实现它。 在内容部分,作者介绍了两种具体的实现...

    15种表单占位符placeholder动画jquery插件

    此外,foxholder.js还具有良好的浏览器兼容性,它支持现代浏览器,同时也考虑到了对老版本IE的兼容,这使得它能在广泛的用户群体中稳定运行。对于开发者来说,这意味着可以放心地在各种项目中使用此插件,而不必担心...

    浅谈Html5移动端ios/Android兼容性总结

    在处理Flex布局时,不同版本的Android可能不支持`flex-wrap:wrap`,但iOS支持。为确保兼容性,可以使用老版本的Flex语法,或者寻找其他布局替代方案: ```css .box { display: -webkit-box; /* 老版本语法 */ ...

    清新淡雅的表单效果!兼容IE、FF、OP等浏览器

    1. IE兼容:由于IE对CSS的支持相对有限,需要使用条件注释或针对IE的特定CSS hack,如`_width`、`*width`等。对于某些老版本的IE,可能还需要借助JavaScript库如jQuery或Modernizr来实现部分功能。 2. FF和OP兼容:...

Global site tag (gtag.js) - Google Analytics