html5教程-残忍:IE10↘IE7-IE9 type=email的完全抛弃

发布时间:2018-12-18 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了html5教程-残忍:IE10↘IE7-IE9 type=email的完全抛弃脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
小宝典致力于为广大程序猿(媛)提供高品质的代码服务,请大家多多光顾小站,小宝典在此谢过。
 

没错,我还是在下棋。

一、IE10, 你可以的

讲个故事吧。

—————故事开始——————
有个顽童名叫IE, 其9岁的时候,不举;10岁的时候,可以举。

这位叫做IE的顽童,跟纲手婆婆一样,可以向下控制年龄显示,7岁到9岁都可以。但是,为了不让人看穿其真实年龄,当其7~9岁模样的时候,需要不举。不过,身体是同一副,诱人妹子在眼前,不是说不举就不举的。

html5教程-残忍:IE10↘IE7-IE9 type=email的完全抛弃

怎么办?按照道理讲,10岁的IE可以在多多熟悉9岁的身体,学会控制与忍耐。——但是,这是需要多多练习,需要付出不少努力的。然而,这位名叫IE的男童,好逸恶劳、不求上进,其想了一个快捷的办法:当我变成9岁的时候,直接把小弟弟咔嚓了,这样,不就举不起来了嘛!!哈哈,我好聪明!!
—————故事结束——————

这是第二个故事。
—————故事开始——————
IE6-IE9浏览器不支持type="email"的输入框,因此,在这些浏览器的表单提交时:

<input type="email" value="aaaaaaa" />

浏览器不会提示你“邮箱格式不正确”。

IE10下会,类似下面:

html5教程-残忍:IE10↘IE7-IE9 type=email的完全抛弃

也就是说,在IE6~IE9时代,虽然HTML代码是type="email"但是,表现型却是type="text",这使得我们可以渐进使用HTML5的指定表单元素。

在IE10浏览器中,存在如下一些模式:

html5教程-残忍:IE10↘IE7-IE9 type=email的完全抛弃

OK, 现在就存在举与不举的问题了——IE10 email可举,向下的IE7-IE9不可举,怎么办?

我们先看看IE9浏览器,虽然也存在向下兼容模式(IE7-IE8)。但是,所有浏览器都不认识type="email",因此,没有不同,没有处理!

但是,IE10……IE它是如此地懒惰,为了向下兼容,其做法相当霸气,直接将type="email"从渲染层面给“阉掉”了!

—————故事结束——————

前后两个故事,你更愿意相信那一个?

二、IE10,你个阉人

IE10兼容模式是如何“阉割”的?

且看如下简短HTML代码:

<id="email" type="email" />

然后,我们在IE10↘IE8以及ietseter IE8下输出其outerHTML代码,结果:

html5教程-残忍:IE10↘IE7-IE9 type=email的完全抛弃

html5教程-残忍:IE10↘IE7-IE9 type=email的完全抛弃

输出其getAttribute("type")值,IE10↘IE8下为:

html5教程-残忍:IE10↘IE7-IE9 type=email的完全抛弃

其他IE8下:

html5教程-残忍:IE10↘IE7-IE9 type=email的完全抛弃

或者,我们从CSS层面查看,如下选择器:

input[type=email] {     padding: 4px 2px 4px 25px;     border: 1px solid #aaa;     background: #fff url('邮箱小图标') no-repeat left center; } 

IE8浏览器是认识属性选择器的,但是,在IE10↘IE8下,由于IE10自以为高明地把type=email直接阉成了type=text,因此,输入框是这个样子:

html5教程-残忍:IE10↘IE7-IE9 type=email的完全抛弃

而不是应该的这个样子:

html5教程-残忍:IE10↘IE7-IE9 type=email的完全抛弃

上面三个小证明,可以狠狠地点击这里查看:type=email前后渲染变化demo

一句话,IE10浏览器下,所有向下兼容的版本,在渲染< type="email" />这段HTML时候,擅自改动了HTML内容,以< type="text" />输出并渲染!因此,这种阉割导致了很多相关不兼容与悲剧!!

我看查看加载后的HTML代码:

html5教程-残忍:IE10↘IE7-IE9 type=email的完全抛弃

只有HTML5支持类型input框才有此悲剧
什么意思?也就是说,IE10向下版本,只有IE10本身支持的type=emailurlnumbertelrange的时候,才会阉割成text类型。

IE10本身不支持的类型,如type=date或自定义的type=zipcode是可以正常识别的。

html5教程-残忍:IE10↘IE7-IE9 type=email的完全抛弃

三、渐进使用的大悲剧

IE10这种取巧的懒惰做法是在是太龌龊了,

html5教程-残忍:IE10↘IE7-IE9 type=email的完全抛弃

html5教程-残忍:IE10↘IE7-IE9 type=email的完全抛弃

html5教程-残忍:IE10↘IE7-IE9 type=email的完全抛弃

html5教程-残忍:IE10↘IE7-IE9 type=email的完全抛弃

html5教程-残忍:IE10↘IE7-IE9 type=email的完全抛弃

我表示很气愤!

这种龌龊做法实际上阻碍的HTML5表单当下阶段的普及与应用。

比方说,我想根据文本框的type类型,进行正则匹配,进行表单验证。使用HTML5表单是最佳选择,因为①规范②面向未来③低学习成本

如果没有IE10,尤其IE10浏览器向下兼容版本的龌龊做法,这个idea是相当赞,可行性相当高,且无压力。IE10真是毁锅的老鼠屎!

四、后知后觉的存在

进过我的反复尝试与测试,要让type=email存在于页面文档中,只能在页面渲染完毕后(后知后觉)进行处理,只能是这样子干:

var email = document.createElement("input"); email.type = "email";    // 某些IE浏览器如正统IE9会报"无效参数"错误 document.body.appendChild(email);

可以看到,IE10↘IE8,[type=email]CSS属性选择器作用了,HTML代码也是type="email"了:

html5教程-残忍:IE10↘IE7-IE9 type=email的完全抛弃

您可以狠狠地点击这里:DOM创建示意demo

但是,在实际使用中,表单元素不可能通过JS DOM创建(注意,innerHTML注入<input type="email">是无效的!),因此,这个方法只可远观而不可亵玩焉。

或者,如下比较蛋疼的后知后觉做法:
在书写HTML的时候,我们不是type="email"而是type="email ",在后面(或前面)键入一个空格(或其他非单词字符)。上面已经提过了,email会被阉割成text,但是,email+空格却不会。

因此,如下HTML代码:

<id="email" type="email " />

然后,如下JS代码:

var email = document.getElementById("email"); try { email.type = email.type.replace(//s+$/, ""); } catch(e) {}

结果:

html5教程-残忍:IE10↘IE7-IE9 type=email的完全抛弃

html5教程-残忍:IE10↘IE7-IE9 type=email的完全抛弃

您可以狠狠地点击这里:后期trim type效果demo

看上去还不错。但是,部分IE浏览器是不允许type类型的改变的,因此,上面的做法只能是部分修复——不过好在的是IE10以及其他现代浏览器(支持HTML5表单元素的)都是支持这种修复的。

因此:

  1. 不影响支持HTML5表单的浏览器的原生使用
  2. 蛋疼的IE10向下兼容以及其他IE浏览器可以知道这个是email类型输入框(简单trim下即可)

五、希望啊希望

据说IE10是自动升级的,我就希望,过个个把月,IE10把这个糟糕的bug给修复了,我还可以可以给他说两句好话,否则,我没事就拿IE10吐槽!

目前而言,如果您遇到这个问题,最好的做法是:什么也不用做!

没有什么好的修复方法!加上使用IE10浏览器的人国内并不多,加上使用IE10兼容模式的也不多,因此,先忽略这个让人吐血折寿的问题吧,该喝咖啡的和咖啡,该刷微博的刷微博……

如果您实在想做点什么,试试在头部加上这个meta源信息吧(并不推荐):

<meta http-equiv="X-UA-Compatible" content="IE=edge" />

(本篇完)

觉得可用,就经常来吧! 脚本宝典 欢迎评论哦! html5教程,巧夺天工,精雕玉琢。小宝典献丑了!

脚本宝典总结

以上是脚本宝典为你收集整理的html5教程-残忍:IE10↘IE7-IE9 type=email的完全抛弃全部内容,希望文章能够帮你解决html5教程-残忍:IE10↘IE7-IE9 type=email的完全抛弃所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。
标签:CSSHTML