关于HTML5 Placeholder新标签低版本浏览器下不兼容的问题分析及解决办法
来源:易贤网 阅读:1001 次 日期:2016-07-09 09:56:53
温馨提示:易贤网小编为您整理了“关于HTML5 Placeholder新标签低版本浏览器下不兼容的问题分析及解决办法”,方便广大网友查阅!

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

更多信息请查看网页制作
由于各方面情况的不断调整与变化,易贤网提供的所有考试信息和咨询回复仅供参考,敬请考生以权威部门公布的正式信息和咨询为准!
关于我们 | 联系我们 | 人才招聘 | 网站声明 | 网站帮助 | 非正式的简要咨询 | 简要咨询须知 | 加入群交流 | 手机站点 | 投诉建议
工业和信息化部备案号:滇ICP备2023014141号-1 云南省教育厅备案号:云教ICP备0901021 滇公网安备53010202001879号 人力资源服务许可证:(云)人服证字(2023)第0102001523号
云南网警备案专用图标
联系电话:0871-65317125(9:00—18:00) 获取招聘考试信息及咨询关注公众号:hfpxwx
咨询QQ:526150442(9:00—18:00)版权所有:易贤网
云南网警报警专用图标