• 售前

  • 售后

热门帖子
入门百科

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

[复制链接]
yslzaity 显示全部楼层 发表于 2021-10-26 13:23:09 |阅读模式 打印 上一主题 下一主题
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新标签低版本欣赏器下不兼容的标题分析及办理办法 的相关内容,希望对各人有所帮助。

帖子地址: 

回复

使用道具 举报

分享
推广
火星云矿 | 预约S19Pro,享500抵1000!
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

草根技术分享(草根吧)是全球知名中文IT技术交流平台,创建于2021年,包含原创博客、精品问答、职业培训、技术社区、资源下载等产品服务,提供原创、优质、完整内容的专业IT技术开发社区。
  • 官方手机版

  • 微信公众号

  • 商务合作