在开发前端系统时候碰到这种兼容问题,以下是个人解决方案,希望能给其他人带来帮助:

  1. var JPlaceHolder = {
  2. //检测
  3. _check: function () {
  4. return 'placeholder' in document.createElement('input');
  5. },
  6. //初始化
  7. init: function () {
  8. if (!this._check()) {
  9. this.fix();
  10. }
  11. },
  12. //修复
  13. fix: function () {
  14. jQuery(':input[placeholder]').each(function (index, element) {
  15. var self = $(this), txt = self.attr('placeholder'), atrValue = self.attr('type');
  16.  
  17. //密码文本框
  18. if (atrValue == "password") {
  19. self.attr("type", "text");
  20. self.attr("pwd", "true");
  21. } else {
  22. self.attr("pwd", "false");
  23. }
  24.  
  25. self.focusin(function (e) {
  26. var atrpwd = self.attr('pwd');
  27. if (atrpwd == "true") {
  28. self.attr("type", "password");
  29. } else {
  30. self.attr("type", "text");
  31. }
  32. self.val("");
  33. }).focusout(function (e) {
  34. if (!self.val()) {
  35. self.attr("type", "text");
  36. self.val(txt);
  37. }
  38. });
  39. if (self.val().length > 0) {
  40. self.val("");
  41. }
  42. else {
  43. self.val(txt);
  44.  
  45. }
  46.  
  47. });
  48. }
  49. };
  50. //执行
  51. jQuery(function () {
  52. JPlaceHolder.init();
  53. });

  

修复IE9.0下PlaceHolder 属性问题js脚本的更多相关文章

  1. placeholder属性兼容js支持

    $(function(){ //判断浏览器是否支持placeholder属性 supportPlaceholder='placeholder'in document.createElement('in ...

  2. 兼容ie10以下版本的placeholder属性

    <script src="${ctx }/js/jquery.placeholder.js" type="text/javascript">< ...

  3. 关于Js脚本的延迟执行

      关于标签,我们有一般会放在两个地方,一个是在标签的内部,另一个是放在前面.这一次我们着重讲解一下放在标签内部.在我们用Js操作DOM元素时,如果不延时执行,DOM元素其实是根本还没有被渲染出来的. ...

  4. 让IE下支持Html5的placeholder属性

    HTML5对Web Form做了许多增强,比如input新增的type类型.Form Validation等. Placeholder 是HTML5新增的另一个属性,当input或者textarea设 ...

  5. 从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 十八║Vue基础: 指令(下)+计算属性+watch

    回顾 今天来晚辣,给公司做了一个小项目,一个瀑布流+动态视频控制的DEMO,有需要的可以联系我,公司的项目就不对外展示了(一个后端程序员真的要干前端了哈哈哈). 书接上文,昨天正式的开始了Vue的代码 ...

  6. js解决IE8、9下placeholder的兼容问题

    由于placeholder是html5的新属性,在IE8.IE9下是不能显示的,有兼容性问题. 解决思路: 1.判断目前浏览器是否支持placeholder属性 2.若不支持,则将type=" ...

  7. input 的 placeholder属性在IE8下的兼容处理

    placeholder是input标签的新属性,在使用的时候有两个问题: 1.IE8 下不兼容 处理思路: 如果浏览器不识别placeholder属性,给input添加类名placeholder,模仿 ...

  8. 让ie支持placeholder属性,一段js搞定

    placeholder属性真的是超级好用的新属性,可惜,只有新版浏览器才支持,为了写出输入框贴心提示,老方法就是加span标签覆盖,营造出placeholder提示的感觉,现在安利一款好用的js,好用 ...

  9. 有关ie9 以下不支持placeholder属性以及获得焦点placeholder的移除

    (一)placeholder 属性起到提示客户输入信息作用 (二)ie9以下出问题了 placeholder不支持 (三)解决办法 先贴html 加上jquery代码就可以了 关于表单获取焦点,chr ...

随机推荐

  1. Aptana插件安装方法

    本人用的是Zend Studio10.0,在开发项目过程中,发现该软件无法对css和js进行代码提示,这样用起来很不方便,然后在网上找了一下Aptana插件 进入Aptana官网:http://www ...

  2. Fiddler测试WebApi的Post方法报错

    标题头要加 Content-Type: application/json,Request Body中写json数组.

  3. jq之ajax以及json数据传递

    <html> <head><meta http-equiv="Content-Type" content="text/html; chars ...

  4. Ios学习之容器的理解

    UInavgationController 和 UITabbarController 都是容器 1:uinavigationcontroller (导航控制器) uinavigationcontrol ...

  5. Winform API "user32.dll"中的函数

    命名空间:System.Runtime.InteropServices /// <summary> /// 该函数检索一指定窗口的客户区域或整个屏幕的显示设备上下文环境的句柄,以后可以在G ...

  6. SQL Server 常用命令使用方法

    (1) 数据记录筛选: sql="select * from 数据表 where 字段名=字段值 order by 字段名 [desc]" sql="select * f ...

  7. 关于odbc的彻底删除问题

    最近在装一个软件,由于第一次安装产生了一个错误,于是我尝试在卸载之后,重新进行安装~但是,在安装过程当中出现了一个问题. NEWLRE ODBC data source already exists. ...

  8. 针对bootstrap内联单选框input与文字不能居中对齐的解决办法

    1.html代码 <div > <label class="checkbox-inline first-label"> <input type=&qu ...

  9. LESS初探

    1. 安装less $ npm install -g less 2. less文件编译成css文件 $ lessc styles.less styles.css <!DOCTYPE html&g ...

  10. python模块学习心得

    初始模块 1.什么是模块 模块是用来实现某项功能的一大堆代码,为什么会有模块呢?过程式编程的时候为了减少程序员编程代码的重复性,就利用函数的调用减少了代码的重复性,但是某些时候程序会过于的庞大,我们会 ...