这是一个老问题,结合前辈们的经验,需要处理的问题有一下几个。

  1.只有输入框(input/textarea)下的palaceholder属性存在的时候才需要处理这类兼容

  2.处理好输入框上焦点和是焦点的文本显示

  3.密码输入框比较特殊,因为为其设置显示文本时显示的是一串“***”。这个问题后面分析。处理好前两点还是比较简单的,处理源码为如下

var browserSupport = {placeholder: 'placeholder' in document.createElement('input')
}$(function() {//模拟placeholderif( !browserSupport.placeholder){$('input[placeholder],textarea[placeholder]').each(function(){var that = $(this),text= that.attr('placeholder'),oldType; if(that.val()===""){that.val(text).addClass('placeholder');                }   that.focus(function(){//ie8下readonly依然可以上焦点的处理if(that.attr('readonly')){that.blur();return;}that.removeClass('placeholder');if(that.val()===text){   that.val("");   }   }).blur(function(){if(that.val()===""){ that.val(text).addClass('placeholder');//防止异常情况:当有placeholder类,且值不为空(代码设置值时容易出现)}else{that.removeClass('placeholder');}   }).closest('form').submit(function(){   if(that.val() === text){   that.val('');   }   });   });}
});    

  可以看出处理还是比较简单的。在不支持placeholder的浏览器下没有上焦点的为placeholder的空白输入框添加class placeholder并设置其内容为placeholder值。上焦点的placeholder的输入框判断其值是否是手动设置的placeholder值,如果是则重置输入框为空白。当然免不了提交表单的时候要清除兼容placeholder的影响。

  这里面有一个细节事件是绑定在标签对应的缓存中,而不是委托document等祖先节点,为什么?有两个考虑:1.避免有设置事件禁止冒泡导致绑定到document上的事件没法处理。2.事件执行的先后顺序是先执行绑定到自身节点的事件,然后在冒泡到document节点执行事件源委托到document的事件。

  

  至于第3点密码输入框的问题。我们首先考虑是当密码输入框失焦的时候先更改输入框的type为text类型然后按照正常的设置其值为placeholder值;聚焦的时候将type值设置回来并恢复其值。但是这个存在问题是IE8不允许更改type类型。没招了,只能额外的添加一个元素来展示密码输入框的placeholder值。结果完整的源码就变成了如下

/*
.placeholder{    color: #aaa!important;
}
span.placeholder{position: absolute;left: 0;line-height: 34px;padding-left: 12px;
}
*/
var browserSupport = {placeholder: 'placeholder' in document.createElement('input')
}/* ajax请求发现未登录时,服务端返回401错误,然后此处统一处理401错误,跳转到登录页面 */
$(document).ready(function() {//模拟placeholderif( !browserSupport.placeholder){$('input[placeholder],textarea[placeholder]').each(function(){var that = $(this),text= that.attr('placeholder'),oldType; if(that.val()===""){if(that.attr('type') != 'password'){that.val(text).addClass('placeholder');  }else{that.before('<span class="placeholder">请输入密码</span>');}}   that.focus(function(){//ie8下readonly依然可以上焦点的处理if(that.attr('readonly')){that.blur();return;}//清除span.placeholderthat.prev("span.placeholder").remove();that.removeClass('placeholder');if(that.val()===text){   that.val("");   }   }).blur(function(){if(that.val()===""){if(that.attr('type') != 'password'){   that.val(text).addClass('placeholder');}else{that.before('<span class="placeholder">请输入密码</span>');}//防止异常情况:当有placeholder类,且值不为空(代码设置值时容易出现)}else{that.removeClass('placeholder');}   }).closest('form').submit(function(){   if(that.val() === text){   that.val('');   }   });   }); $(document).on('click','span.placeholder',function(){$(this).next("[placeholder]").focus();//删除span.placeholder会在[placeholder]的focus中进行
        })}
})

  我自己专门添加了一个span.placeholder来显示密码输入框的占位符显示。然后添加了一个监听器监听span.placeholder被点击。

  功能是完成了,在测试的时候还是会遇到一个问题,浏览器有自动填写表单的时候初始化可能会出现异常,现在为止还没有什么好的方法捕获自动填写表单事件,结果可能导致密码输入框的placeholder显示和内容一起显示。所以如果要使用这种密码输入框的placeholder兼容方式,最好让浏览器不自动填充,也有利于信息保密:给密码input设置autocomplete=off即可。

  需要注意的是autocomplete=off在chrome下也有兼容问题,不过这里是专门给IE下用的到没有什么问题,只不过chrome下是没有保密而已。更多的信息自行百度。

  如果觉得本文不错,请点击右下方【推荐】!

placeholder的兼容处理(jQuery下)相关推荐

  1. java pjax_通过pjax实现无刷新翻页(兼容新版jquery)

    摘要:这篇jQuery栏目下的"通过pjax实现无刷新翻页(兼容新版jquery)",介绍的技术点是"jQuery.无刷新翻页.pjax.无刷新.刷新.翻页", ...

  2. 15个精心挑选的 jQuery 下拉菜单制作教程

    下拉菜单是网站导航常用的表现形式之一,能够呈现更多的导航内容.如果网站能够设计出有吸引力的网站导航,将会吸引更多的用户去浏览网站的内容.今天本文就为大家挑选了25个非常好的 jQuery 下拉菜单制作 ...

  3. jQuery下的ajax【5分钟掌握】

    jquery下的ajax方法 load ajax get post load()方法 jQuery load() 方法是简单但强大的 AJAX 方法. load() 方法从服务器加载数据,并把返回的数 ...

  4. placeholder的兼容处理方法

    placeholder是html5新增的一个属性,极大的减轻了表单提示功能的实现,但是对于IE6-IE9真的是只能靠自己写啦! 但是在自己写时会掉进了一个坑里,还好用了一会时间还是爬出来啦. 最终的解 ...

  5. Jquery下的Ajax调试方法

    Jquery下的Ajax调试方法 介绍 本文介绍Jquery下的Ajax调试方法:很多调试方法,就是一点就通,但是,在还没有通之前,会让人困惑,不知所以然: Ajax 可以为用户提供更为丰富的用户体验 ...

  6. 解决jquery下checked取值问题...

    解决jquery下checked取值问题... 参考文章: (1)解决jquery下checked取值问题... (2)https://www.cnblogs.com/playerlife/archi ...

  7. 可控制导航下拉方向的jQuery下拉菜单代码

    可控制导航下拉方向的jQuery下拉菜单代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ...

  8. jQuery下的ajax之省市区三级联动

    jQuery下的ajax之省市区三级联动 小编提醒一下别忘了引入jQuery文件哟 HTML 所在省份:<select name="province"><opti ...

  9. jQuery下拉式复选框

    jQuery下拉式复选框 jQuery制作选择分类点击弹出下拉复选菜单,支持子菜单和主菜单多选效果.这是一款简单实用的复选框菜单选择代码. 演示地址 下载地址

最新文章

  1. 面试彩蛋2:分别用循环和递归实现下列函数
  2. linux进程间通讯-有名管道
  3. CCS下DSP仿真实现双边带调制与频谱分析(查表法)
  4. jquery easyui的应用-2
  5. 我是如何学习写一个操作系统(六):进程的调度
  6. hierarchy change in CRM - step1 inbound CSAIBASE queue
  7. ffmpeg 解码音频(aac、mp3)输出pcm文件
  8. vi/vim使用进阶: 文件浏览和缓冲区浏览
  9. Oracle与MySQL使用区别
  10. C#实现IDispose接口
  11. 深度学习超参数简单理解:learning rate,weight decay和momentum
  12. 拉格朗日插值法与牛顿插值法
  13. 唐诗赏析html网页制作,【毕业论文】古诗词鉴赏网站的设计与实现.doc
  14. stm32上基于LwIP移植LibArtnet
  15. gimp 架构_超级图像处理软件 gimp 2.99.2中文免费版
  16. 解决ECharts官网打开缓慢的问题
  17. 黑马——C语言的一些基础(2)
  18. 网易邮箱服务器邮箱协议,怎么用网易闪电邮IMAP协议同步网页邮箱?
  19. Leetcode1-两数之和
  20. Linux之NTFS、FAT32、exFAT各种格式硬盘挂载整理

热门文章

  1. jlink烧录软件_使用 MCU BootUtility 工具来烧录I.MXRT
  2. angular动态选择HTML模板,在angular2中动态加载HTML模板
  3. Leetcode-5846.周赛 找到数组的中间位置
  4. 【产品】场景化需求洞察
  5. 笔记-高项案例题-2017年下-计算题
  6. Vue+Openlayer使用overlay实现弹窗弹出显示与关闭
  7. Electron中打开和关闭子窗口以及子窗口向父窗口传值
  8. SpringDataRedis对Redis的数据类型的常用操作API的使用代码举例
  9. MyBatisPlus条件构造器带条件删除delete使用
  10. 从实例入手学会BeautifulSoup的常用方法