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

所属分类: 网页制作 / html5 阅读数: 1710
收藏 0 赞 0 分享

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新标签低版本浏览器下不兼容的问题分析及解决办法 的相关内容,希望对大家有所帮助。

更多精彩内容其他人还在看

HTML5梦幻之旅——炫丽的流星雨效果实现过程

流星出现的时候,人们都喜欢对着它们许愿,因为传说对着流星许下愿望后,愿望就能实现,最近出于兴趣,制作一个拖尾效果,后来想到可以通过拖尾效果来实现一下流星雨的效果
收藏 0 赞 0 分享

5个你不知道的HTML5的接口介绍

尽管当前的主流浏览器已经实现了很多的HTML5新特性,但是很多开发者根本就没注意到这些更简洁,也很有用的API,本系列文章介绍这些接口API,同时也希望能鼓励更多开发者去探索那些还不广为人知的API
收藏 0 赞 0 分享

HTML5 placeholder(空白提示)属性介绍

浏览器引入了许多的HTML5 特性其中我最喜欢的一个就是为input元素引入了placeholder属性,placeholder属性显示引导性文字直到输入框获取输入焦点,当有了用户输入内容后引导性内容将会自动隐藏
收藏 0 赞 0 分享

HTML5 自动聚焦(autofocus)属性使用介绍

一个简单的HTML功能是现在允许我们在页面加载完成后自动将输入焦点定位到需要的元素,通过一个叫做 autofocus的属性完成,感兴趣的朋友可以了解下
收藏 0 赞 0 分享

HTML5新增的Css选择器、伪类介绍

HTML5新增了Css选择器、伪类,本文整理了一些,并给出简单的使用介绍,喜欢html5的朋友可以参考下,希望对大家有所帮助
收藏 0 赞 0 分享

通过Canvas及File API缩放并上传图片完整示例

创建一个只管的用户界面,并允许你控制图片的大小。上传到服务器端的数据,并不需要处理enctype为 multi-part/form-data 的情况,仅仅一个简单的POST表单处理程序就可以了. 好了,下面附上完整的代码示例
收藏 0 赞 0 分享

Canvas与Image互相转换示例代码

本文向大家展示怎样转换Image为canvas,以及canvas如何提取出一个Image,示例代码如下,有此需求的朋友可以参考下,希望对大家有所帮助
收藏 0 赞 0 分享

HTML5的语法变化介绍

HTML5的语法变化主要体现在标签不再区分大小写、元素可以省略结束标签、允许省略属性值的属性等等,感兴趣的朋友可以参考下,希望对大家了解html5有所帮助
收藏 0 赞 0 分享

HTML5 预加载让页面得以快速呈现

预加载是一种浏览器机制,使用浏览器空闲时间来预先下载/加载用户接下来很可能会浏览的页面/资源,当用户访问某个预加载的链接时,如果从缓存命中,页面就得以快速呈现
收藏 0 赞 0 分享

HTML5 input元素类型:email及url介绍

HTML5改进的地方想必大家有所知晓,下面我要介绍的是两个新的input元素类型email和url。让我们跟着代码来看看他们的好处,感兴趣的朋友可以参考下
收藏 0 赞 0 分享
查看更多