placeholder的兼容处理(jQuery下)
程序员文章站
2022-07-15 21:07:51
...
/* .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() { //模拟placeholder if( !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.placeholder that.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中进行 }) } })
参考:http://www.cnblogs.com/chuaWeb/p/5062671.html
推荐阅读
-
jQuery+ajax的资源回收处理机制分析
-
javascript下兼容firefox选取textarea文本的代码
-
jQuery实现的鼠标拖动画矩形框示例【可兼容IE8】
-
Win10系统下chrome浏览器占用CPU过高的处理方法
-
关于HTML5 Placeholder新标签低版本浏览器下不兼容的问题分析及解决办法
-
IE8下CSS3选择器nth-child() 不兼容问题的解决方法
-
HTML5中的进度条progress元素简介及兼容性处理
-
windows下配置apache+php+mysql时出现问题的处理方法
-
jQuery插件版本冲突的处理方法分析
-
在jquery中combobox多选的不兼容问题总结