placeholder的兼容处理(jQuery下)
这是一个老问题,结合前辈们的经验,需要处理的问题有一下几个。
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下)相关推荐
- java pjax_通过pjax实现无刷新翻页(兼容新版jquery)
摘要:这篇jQuery栏目下的"通过pjax实现无刷新翻页(兼容新版jquery)",介绍的技术点是"jQuery.无刷新翻页.pjax.无刷新.刷新.翻页", ...
- 15个精心挑选的 jQuery 下拉菜单制作教程
下拉菜单是网站导航常用的表现形式之一,能够呈现更多的导航内容.如果网站能够设计出有吸引力的网站导航,将会吸引更多的用户去浏览网站的内容.今天本文就为大家挑选了25个非常好的 jQuery 下拉菜单制作 ...
- jQuery下的ajax【5分钟掌握】
jquery下的ajax方法 load ajax get post load()方法 jQuery load() 方法是简单但强大的 AJAX 方法. load() 方法从服务器加载数据,并把返回的数 ...
- placeholder的兼容处理方法
placeholder是html5新增的一个属性,极大的减轻了表单提示功能的实现,但是对于IE6-IE9真的是只能靠自己写啦! 但是在自己写时会掉进了一个坑里,还好用了一会时间还是爬出来啦. 最终的解 ...
- Jquery下的Ajax调试方法
Jquery下的Ajax调试方法 介绍 本文介绍Jquery下的Ajax调试方法:很多调试方法,就是一点就通,但是,在还没有通之前,会让人困惑,不知所以然: Ajax 可以为用户提供更为丰富的用户体验 ...
- 解决jquery下checked取值问题...
解决jquery下checked取值问题... 参考文章: (1)解决jquery下checked取值问题... (2)https://www.cnblogs.com/playerlife/archi ...
- 可控制导航下拉方向的jQuery下拉菜单代码
可控制导航下拉方向的jQuery下拉菜单代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ...
- jQuery下的ajax之省市区三级联动
jQuery下的ajax之省市区三级联动 小编提醒一下别忘了引入jQuery文件哟 HTML 所在省份:<select name="province"><opti ...
- jQuery下拉式复选框
jQuery下拉式复选框 jQuery制作选择分类点击弹出下拉复选菜单,支持子菜单和主菜单多选效果.这是一款简单实用的复选框菜单选择代码. 演示地址 下载地址
最新文章
- 面试彩蛋2:分别用循环和递归实现下列函数
- linux进程间通讯-有名管道
- CCS下DSP仿真实现双边带调制与频谱分析(查表法)
- jquery easyui的应用-2
- 我是如何学习写一个操作系统(六):进程的调度
- hierarchy change in CRM - step1 inbound CSAIBASE queue
- ffmpeg 解码音频(aac、mp3)输出pcm文件
- vi/vim使用进阶: 文件浏览和缓冲区浏览
- Oracle与MySQL使用区别
- C#实现IDispose接口
- 深度学习超参数简单理解:learning rate,weight decay和momentum
- 拉格朗日插值法与牛顿插值法
- 唐诗赏析html网页制作,【毕业论文】古诗词鉴赏网站的设计与实现.doc
- stm32上基于LwIP移植LibArtnet
- gimp 架构_超级图像处理软件 gimp 2.99.2中文免费版
- 解决ECharts官网打开缓慢的问题
- 黑马——C语言的一些基础(2)
- 网易邮箱服务器邮箱协议,怎么用网易闪电邮IMAP协议同步网页邮箱?
- Leetcode1-两数之和
- Linux之NTFS、FAT32、exFAT各种格式硬盘挂载整理
热门文章
- jlink烧录软件_使用 MCU BootUtility 工具来烧录I.MXRT
- angular动态选择HTML模板,在angular2中动态加载HTML模板
- Leetcode-5846.周赛 找到数组的中间位置
- 【产品】场景化需求洞察
- 笔记-高项案例题-2017年下-计算题
- Vue+Openlayer使用overlay实现弹窗弹出显示与关闭
- Electron中打开和关闭子窗口以及子窗口向父窗口传值
- SpringDataRedis对Redis的数据类型的常用操作API的使用代码举例
- MyBatisPlus条件构造器带条件删除delete使用
- 从实例入手学会BeautifulSoup的常用方法