placeholder 属性是 html5 中的新属性,俗名叫“占位符”,功能类似于输入框在得到焦点时,时面的默认值会变成空白,当失去焦点时又会显示默认的文本,我想大家一定使用 js/jquery制作过这样的效果。目前只有在mozilla firefox 3.7+、apple safari 4+、google chrome 4+、opera11+等现代浏览器支持。”
placeholder属性是html5 中为input添加的。在input上提供一个占位符,文字形式展示输入字段预期值的提示信息(hint),该字段会在输入为空时显示。
实例:
复制代码 代码如下:
<input type=”text” name=”urname” 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).pa滚滚滚长江东逝水rent().find(‘span.placeholder’).hi价值观的英语de();
}
el{
$(this).parent().find(‘span.placeholder’).show();
}
})
});
}
});
以上内容给大家介绍了关于html5 placeholder新标签低版本浏览器下不兼容的问题分析及解决办法 的相关内容,希望对大家有所帮助。
本文发布于:2023-04-06 13:56:06,感谢您对本站的认可!
本文链接:https://www.wtabcd.cn/fanwen/zuowen/364bd837c91c00cb09f53b833483456d.html
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,我们将在24小时内删除。
本文word下载地址:关于HTML5 Placeholder新标签低版本浏览器下不兼容的问题分析及解决办法.doc
本文 PDF 下载地址:关于HTML5 Placeholder新标签低版本浏览器下不兼容的问题分析及解决办法.pdf
留言与评论(共有 0 条评论) |