关于HTML5 Placeholder新标签低版本浏览器下不兼容的问题分析及解决办法


Posted in HTML / CSS onJanuary 27, 2016

placeholder 属性是 HTML5 中的新属性,俗名叫“占位符”,功能类似于输入框在得到焦点时,时面的默认值会变成空白,当失去焦点时又会显示默认的文本,我想大家一定使用 js/jquery制作过这样的效果。目前只有在Mozilla Firefox 3.7+、Apple Safari 4+、Google Chrome 4+、Opera11+等现代浏览器支持。”
placeholder属性是HTML5 中为input添加的。在input上提供一个占位符,文字形式展示输入字段预期值的提示信息(hint),该字段会在输入为空时显示。
实例:

复制代码
代码如下:

<input type="text" name="userName" placeholder="请输入用户名">

placeholder操作起来非常方便,提高了开发效率,同时在高版本浏览器中用户体验也很好,所以本人很喜欢用这个属性。
然而,在IE9以下版本浏览器就失效了,并且IE10+支持placeholder属性,它的表现与其它浏览器也不一致
•IE10+里鼠标点击时(获取焦点)placeholder文本消失
•Firefox/Chrome/Safari点击不消失,而是键盘输入时文本消失
那么作为一名开发人员,是否应该去克服解决这个问题呢。目前网上也一堆类似解决方案,大致实现思路分为两种:
1.(方式一)使用input的value作为显示文本,模拟灰色样式,focus让$("[placeholder]").val()=="",blur时$("[placeholder]").val(this.defaultValue);
2.(方式二)不使用value,添加一个额外的标签(span)到body里然后绝对定位覆盖到input上面。
在这里因第一种方式实现起来,占用了value且验证时需要做额外的判断,那么个人建议使用第二种方式。
首先,判断当前浏览器是否支持placeholder属性:

复制代码
代码如下:

function placeholderSupport() {
return 'placeholder' in document.createElement('input');
}

上关键代码:

复制代码
代码如下:

/*
*placeholder兼容ie9以下 author:高丰鸣 add 2016-1-27
*/
$(function(){
if(!placeholderSupport()){ // 判断浏览器是否支持 placeholder
$(document).ready(function(){
//默认遍历循环添加placeholder
$('[placeholder]').each(function(){
$(this).parent().append("<span class='placeholder'>"+$(this).attr('placeholder')+"</span>");
})
$('[placeholder]').blur(function(){
if($(this).val()!=""){ //如果当前值不为空,隐藏placeholder
$(this).parent().find('span.placeholder').hide();
}
else{
$(this).parent().find('span.placeholder').show();
}
})
});
}
});

以上内容给大家介绍了关于HTML5 Placeholder新标签低版本浏览器下不兼容的问题分析及解决办法 的相关内容,希望对大家有所帮助。

HTML / CSS 相关文章推荐
多重CSS背景动画实现方法示例
Apr 04 HTML / CSS
css3发光搜索表单分享
Apr 11 HTML / CSS
纯CSS实现颜色渐变效果(包含环形渐变、线性渐变、彩虹效果等)
May 07 HTML / CSS
CSS3中的transform属性进行2D和3D变换的基本用法
May 12 HTML / CSS
css3实现书本翻页效果的示例代码
Mar 08 HTML / CSS
html5的localstorage详解
May 09 HTML / CSS
HTML 5 标签、属性、事件及浏览器兼容性速查表 附打包下载
Oct 20 HTML / CSS
html5定位获取当前位置并在百度地图上显示
Aug 22 HTML / CSS
HTML5本地数据库基础操作详解
Apr 26 HTML / CSS
Canvas系列之滤镜效果
Feb 12 HTML / CSS
HTML5给汉字加拼音收起展开组件的实现代码
Apr 08 HTML / CSS
css display table 自适应高度、宽度问题的解决
May 07 HTML / CSS
HTML5手机端弹出遮罩菜单特效代码
Jan 27 #HTML / CSS
HTML5实现简单图片上传所遇到的问题及解决办法
Jan 20 #HTML / CSS
Html5实现二维码扫描并解析
Jan 20 #HTML / CSS
图片上传插件ImgUploadJS:用HTML5 File API 实现截图粘贴上传、拖拽上传
Jan 20 #HTML / CSS
HTML5 History API 实现无刷新跳转
Jan 11 #HTML / CSS
基于HTML5新特性Mutation Observer实现编辑器的撤销和回退操作
Jan 11 #HTML / CSS
Html5插件教程之添加浏览器放大镜效果的商品橱窗
Jan 07 #HTML / CSS
You might like
《DOTA3》开发工作已经开始 《DOTA3》将代替《DOTA2》
2021/03/06 DOTA
PHP 执行系统外部命令 system() exec() passthru()
2009/08/11 PHP
php入门学习知识点四 PHP正则表达式基本应用
2011/07/14 PHP
Smarty模板引擎缓存机制详解
2016/05/23 PHP
PHP var关键字相关原理及使用实例解析
2020/07/11 PHP
IE8提示Invalid procedure call or argument 异常的解决方法
2012/09/30 Javascript
javascript判断两个IP地址是否在同一个网段的实现思路
2013/12/13 Javascript
Jquery模仿Baidu、Google搜索时自动补充搜索结果提示
2013/12/26 Javascript
JQuery核心函数是什么及使用方法介绍
2016/05/03 Javascript
Angular2中Bootstrap界面库ng-bootstrap详解
2016/10/18 Javascript
BootStrap树状图显示功能
2016/11/24 Javascript
node.js爬虫爬取拉勾网职位信息
2017/03/14 Javascript
小发现之浅谈location.search与location.hash的问题
2017/06/23 Javascript
浅谈如何使用webpack构建多页面应用
2018/05/30 Javascript
layui获取多选框中的值方法
2018/08/15 Javascript
vue.js表单验证插件(vee-validate)的使用教程详解
2019/05/23 Javascript
three.js利用gpu选取物体并计算交点位置的方法示例
2019/11/25 Javascript
JS实现的雪花飘落特效示例
2019/12/03 Javascript
JS apply用法总结和使用场景实例分析
2020/03/14 Javascript
js实现淘宝浏览商品放大镜功能
2020/10/28 Javascript
python代码制作configure文件示例
2014/07/28 Python
在Python操作时间和日期之asctime()方法的使用
2015/05/22 Python
Python模块结构与布局操作方法实例分析
2017/07/24 Python
django rest framework 数据的查找、过滤、排序的示例
2018/06/25 Python
Python 字符串与二进制串的相互转换示例
2018/07/23 Python
python实现三次样条插值
2018/12/17 Python
Desigual英国官网:在线购买原创服装
2018/03/09 全球购物
JAVA程序员面试题
2012/10/03 面试题
外贸公司实习自我鉴定
2013/09/24 职场文书
2014全国两会大学生学习心得体会
2014/03/10 职场文书
《登鹳雀楼》教学反思
2014/04/09 职场文书
环保建议书300字
2014/05/14 职场文书
党员干部廉洁承诺书
2014/05/28 职场文书
开展党的群众路线教育实践活动情况汇报
2014/11/05 职场文书
写给领导的感谢信
2015/01/22 职场文书
小学一年级班主任工作经验交流材料
2015/11/02 职场文书