关于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 相关文章推荐
CSS3动画之流彩文字效果+图片模糊效果+边框伸展效果实现代码合集
Aug 18 HTML / CSS
详解H5本地储存Web Storage
Jul 03 HTML / CSS
教你如何一步一步用Canvas写一个贪吃蛇
Oct 22 HTML / CSS
HTML5实现分享到微信好友朋友圈QQ好友QQ空间微博二维码功能
Jan 03 HTML / CSS
IE9下html5初试小刀
Sep 21 HTML / CSS
html5播放视频且动态截图实现步骤与代码(支持safari其他未测试)
Jan 06 HTML / CSS
HTML5之SVG 2D入门4—笔画与填充
Jan 30 HTML / CSS
html5使用canvas画空心圆与实心圆
Dec 15 HTML / CSS
基于HTML5 Canvas的3D动态Chart图表的示例
Nov 02 HTML / CSS
html5借用repeating-linear-gradient实现一把刻度尺(ruler)
Sep 09 HTML / CSS
用canvas显示验证码的实现
Apr 10 HTML / CSS
萌新的HTML5 入门指南
Nov 06 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
php foreach、while性能比较
2009/10/15 PHP
php URL跳转代码 减少外链
2011/06/25 PHP
PHP中集成PayPal标准支付的实现方法分享
2012/02/06 PHP
PHP验证信用卡卡号是否正确函数
2015/05/27 PHP
PHP添加图片水印、压缩、剪切的封装类
2015/08/17 PHP
javascript 事件处理、鼠标拖动效果实现方法详解
2012/05/11 Javascript
基于jquery的图片轮播 tab切换组件
2012/07/19 Javascript
js实现运动logo图片效果及运动元素对象sportBox使用方法
2012/12/25 Javascript
THREE.JS入门教程(1)THREE.JS使用前了解
2013/01/24 Javascript
模拟一个类似百度google的模糊搜索下拉列表
2014/04/15 Javascript
JS回调函数的应用简单实例
2014/09/17 Javascript
javascript笛卡尔积算法实现方法
2015/04/08 Javascript
JavaScript简单实现弹出拖拽窗口(二)
2016/06/17 Javascript
node.js缺少mysql模块运行报错的解决方法
2016/11/13 Javascript
谈谈JavaScript数组常用方法总结
2017/01/24 Javascript
JavaScript之面向对象_动力节点Java学院整理
2017/06/29 Javascript
详解AngularJS1.x学习directive 中‘&amp; ’‘=’ ‘@’符号的区别使用
2017/08/23 Javascript
Vue.js实现图片的随意拖动方法
2018/03/08 Javascript
vue操作下拉选择器获取选择的数据的id方法
2018/08/24 Javascript
Fetch超时设置与终止请求详解
2019/05/18 Javascript
微信小程序如何实现全局重新加载
2019/06/05 Javascript
js使用cookie实现记住用户名功能示例
2019/06/13 Javascript
vuex实现购物车的增加减少移除
2020/06/28 Javascript
Python函数式编程指南(四):生成器详解
2015/06/24 Python
python中利用Future对象异步返回结果示例代码
2017/09/07 Python
Django Admin 实现外键过滤的方法
2017/09/29 Python
利用python如何处理百万条数据(适用java新手)
2018/06/06 Python
Python字符串、整数、和浮点型数相互转换实例
2018/08/04 Python
Python 隐藏输入密码时屏幕回显的实例
2019/02/19 Python
Appium+Python实现简单的自动化登录测试的实现
2021/01/26 Python
python Autopep8实现按PEP8风格自动排版Python代码
2021/03/02 Python
运动会稿件200字
2014/02/07 职场文书
文明村镇申报材料
2014/05/06 职场文书
校园广播稿精选
2014/10/01 职场文书
使用PDF.js渲染canvas实现预览pdf的效果示例
2021/04/17 Javascript
Python中OpenCV实现简单车牌字符切割
2021/06/11 Python