<meta name="keywords" content="华夏棋牌,placeholder标签,,placeholder不兼容,placeholder,浏览器,html5" />
华夏棋牌 > web前端 > H5教程 > 注释

关于HTML5 Placeholder新标签低版本浏览器下不兼容的效果剖析及处置赏罚赏罚措施 _html5教程手艺

原创 2016-05-16 15:46:02 0 161
赞助会员专享特权
placeholder 属性是 HTML5 中的新属性,俗名叫“占位符”,功效类似于输入框在取得焦点时,时面的默许值会酿成空缺,当掉落去焦点时又会显示默许的文本,我想年夜家一定应用 js/jquery制造过这样的效果。现在只需在Mozilla Firefox 3.7+、Apple Safari 4+、Google Chrome 4+、Opera11+等现代浏览器支持。”
placeholder属性是HTML5 中为input添加的。在input上供应一个占位符,文字形式展示输入字段预期值的提醒信息(hint),该字段会在输入为空时显示。
实例:

复制代码
代码以下:


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(""+$(this).attr('placeholder')+"");
})
$('[placeholder]').blur(function(){
if($(this).val()!=""){ //假定以后值不为空,隐藏placeholder
$(this).parent().find('span.placeholder').hide();
}
else{
$(this).parent().find('span.placeholder').show();
}
})
});
}
});

以上内容给年夜家简介了关于HTML5 Placeholder新标签低版本浏览器下不兼容的效果剖析及处置赏罚赏罚措施 的相关内容,欲望对年夜家有所赞助。

php中文网最新课程二维码
  • 相关标签:placeholder标签 placeholder不兼容 placeholder 浏览器 html5
  • 本文原创宣布php中文网 ,转载请注明出处,谢谢您的尊重!
  • 相关文章


  • 若何应用input事宜来监听移动端的输入_html5教程手艺
  • 深刻剖析HTML5 Canvas控制图形矩阵变换的措施_html5教程手艺
  • 实例解说应用SVG制造loading加载动画的措施_html5教程手艺
  • 实例解说应用HTML5 Canvas API操作图形改变的措施_html5教程手艺
  • 关于HTML5 Placeholder新标签低版本浏览器下不兼容的效果剖析及处置赏罚赏罚措施 _html5教程手艺
  • 网友议论

    文明上彀理性语言,请遵守 新闻议论服务协定

    我要议论

    独孤九贱(5)_ThinkPHP5视频教程

    ThinkPHP是国际最盛行的中文PHP开发框架,也是您Web项目的最好选择。《php.cn独孤九贱(5)-ThinkPHP5视频教程》课程以ThinkPHP5最新版本为例,从最基本的框架知识泉源,将...

    • 2017-05-16 12:03:57
    • 点击数(173870)

    独孤九贱(4)_PHP视频教程

    江湖传言:PHP是天下上最好的编程语言。真的是这样吗?这个梗现实是从哪来的?学会本课程,你就会明确了。 华夏棋牌-万豪棋牌电玩城-微信娱乐棋牌出品的PHP入门系统教授修养视频,完全从初学者的角度出发,绝不玩虚的,一切以适用、有用...

    • 2017-03-20 22:47:17
    • 点击数(170040)

    独孤九贱(1)_HTML5视频教程

    华夏棋牌《php.cn原创html5视频教程》课程特点:php中文网原创滑稽段子系列课程,以恶弄,段子为主题气焰气焰的php视频教程!轻松的教授修养气焰气焰,杂乱的教授修养形式,让同砚们在不知不觉中,学会了HTML知识。 ...

    • 2017-03-13 10:15:11
    • 点击数(137359)

    ThinkPHP5实战之[教授修养治理系统]

    华夏棋牌本套教程,以一个真实的黉舍教授修养治理系统为案例,手把手教会您怎样在一张白纸上,从零泉源,一步一步的用ThinkPHP5框架快速开发出一个商业项目。

    • 2017-07-24 16:48:56
    • 点击数(130694)

    PHP入门视频教程之一周学会PHP

    华夏棋牌一切盘算机语言的学习都要从根原泉源,《PHP入门视频教程之一周学会PHP》不只是PHP的基础部门更主要的是PHP语言的焦点手艺,是学习PHP必须控制的内容,任何PHP项目的完成都离不开这部门的内容,通...

    • 2016-11-16 14:54:14
    • 点击数(130036)

    作者信息

    php中文网

    认证0级讲师

    比来文章

    相关视频教程

  • javascript低级视频教程
  • jquery 基础视频教程
  • javascript三级联动视频教程
  • 独孤九贱(3)_JavaScript视频教程
  • 独孤九贱(6)_jQuery视频教程
  • 相关视频章节