`
抹去色彩
  • 浏览: 14176 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

用JavaScript解决Placeholder的IE8兼容问题

阅读更多

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> 
1
0
分享到:
评论

相关推荐

    IE兼容placeholder js

    标签“js placeholder IE兼容”进一步确认了我们讨论的主题,即使用JavaScript来处理`placeholder`属性的IE兼容性问题。JavaScript可以用来检测浏览器类型和版本,然后在不支持`placeholder`属性的IE浏览器中动态...

    input中placeholder在Ie上兼容

    为了解决这个问题,我们可以利用jQuery库来实现对IE的兼容性支持。jQuery是一款强大的JavaScript库,它提供了一套简洁的API,能够简化DOM操作、事件处理以及Ajax交互等任务。对于`placeholder`属性的支持,我们可以...

    ie6 7 8兼容html5属性placeholder

    然而,在IE6、7、8中,我们需要使用JavaScript或者特定的库来模拟这个效果。 一种常见的解决方案是使用jQuery的插件,如`jquery.placeholder.js`。首先,确保引入jQuery库和该插件: ```html ...

    IE8支持的placeholder组件

    需要注意的是,虽然`jquery-placeholder`解决了IE8的`placeholder`问题,但随着浏览器的更新迭代,IE8等老旧浏览器的市场份额已经显著下降。因此,在现代项目中,我们更倾向于使用支持`placeholder`的现代浏览器,...

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

    在IE7中,这些`input`元素将不会显示`placeholder`文本,除非我们用JavaScript对其进行处理。 `jquery-1.10.2.min.js`是jQuery的核心库,它是`jquery.placeholder.min.js`插件运行的基础。jQuery是一个广泛使用的...

    ie8兼容placeholder.zip

    总的来说,处理IE8的`placeholder`兼容问题主要依赖于JavaScript和jQuery插件,通过这些方法,我们可以使旧版浏览器也能享受到现代Web开发带来的便利性。尽管现在大部分用户都已经升级到更现代的浏览器,但在某些...

    IE浏览器支持placeholder

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

    解决IE下不支持placeholder属性

    总结起来,解决IE浏览器不支持`placeholder`属性的问题主要依赖于JavaScript,通过监听输入框的焦点和失去焦点事件来模拟`placeholder`的效果。同时,可以结合Bootstrap的样式来优化视觉体验。无论选择哪种方法,都...

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

    最后,`jplaceholder.js`很可能是专为解决`placeholder`兼容性问题编写的jQuery插件。这个插件会在页面加载完成后,遍历所有`input`元素,检查它们是否具有`placeholder`属性。对于那些不支持`placeholder`的浏览器...

    完美解决IE(IE6/IE7/IE8)不兼容HTML5

    许多jQuery插件如html5shiv-responsive-images、jquery.placeholder等专门用于解决IE浏览器的HTML5兼容问题。 4. **条件注释**: IE浏览器特有的条件注释允许我们针对不同版本的IE插入特定的CSS或JS代码。例如,我们...

    IE下实现placeholder效果的jquery插件

    总的来说,"placeholderfriend.js"插件为开发者提供了一种便捷的方式来解决IE浏览器对`placeholder`属性的支持问题,使得在旧版IE中也能享受到与现代浏览器相似的用户体验。通过理解其工作原理和使用方法,我们可以...

    placeholder(HTML 5) IE 兼容插件

    在实际开发中,考虑到性能和代码维护性,现代项目更倾向于使用成熟的库,如`jQuery.placeholder`或`Modernizr.input.placeholder`等,这些库已经被广泛测试,可以更好地处理各种浏览器兼容性问题。但了解这些插件的...

    ie8以下浏览器不兼容jquery解决方案

    以上是解决"ie8以下浏览器不兼容jQuery"问题的一些常见方法。在实际开发中,根据项目需求和用户群体,可能需要权衡性能、兼容性和维护成本,选择最合适的解决方案。同时,随着技术的发展,逐渐放弃对过时浏览器的...

    placeholder效果

    需要注意的是,虽然这个方法可以解决`placeholder`的兼容问题,但可能不适用于所有复杂场景,例如表单验证和动态创建的输入元素。对于更复杂的情况,可能需要进一步定制代码或寻找更全面的jQuery插件,如`jquery....

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

    总的来说,这个jQuery插件是一个解决浏览器兼容性问题的实用工具,使得在老版本的IE浏览器上也能实现HTML5的placeholder效果,从而提高用户体验。通过学习和使用这个插件,开发者可以更好地理解和掌握如何利用jQuery...

    input框中出现提示文字(兼容ie 火狐 谷歌)

    在IE8及以下版本,我们可以使用传统的JavaScript或者jQuery来模拟`placeholder`效果。一种常见的方法是监听`focus`和`blur`事件。当用户聚焦到输入框时,如果输入框内仍有默认提示文字,就将其清除;当用户离开...

    ie placeholder属性的兼容性问题解决方法

    在给定的文件中,提供了一个实现placeholder功能的JavaScript对象以及使用jQuery进行操作的示例代码。 首先,我们需要创建一个包含多个函数的对象(在示例中命名为var placeholder),这些函数能够处理不同的交互...

    使用jQuery快速解决input中placeholder值在ie中无法支持的问题

    本文将详细介绍两种利用jQuery库快速解决input中placeholder值在IE浏览器中无法支持的方法。首先,了解在IE中placeholder无法显示的原因是IE 9以下的版本不支持该属性。为此,需要采用JavaScript脚本来模拟这一功能...

Global site tag (gtag.js) - Google Analytics