搜索

查看: 88|回复: 0

HTML5 Boolean类型属性(如required)值的JS获取

[复制链接]

489

主题

0

好友

1764

积分

管理员

发表于 2012-12-20 09:36:10 |显示全部楼层
[size=1.05em]我仍在下棋,我不叫尤勇。
[size=1.05em]本文最最关键字——兼容性
[size=1.05em]篇篇文章像老太太裹脚布一样,自己也受不了,简洁简洁。
一、单刀直入,开门见山
  1. <input required />
  2. <input />
复制代码

[size=1.05em]分别使用:
jQuery1.4.4 attr("required"),
jQuery1.6.3 attr("required"),
jQuery1.8.3 prop("required"),
MooTools1.4 getProperty("required"), 以及
原生JS getAttribute("required")的返回值是??
[size=1.05em]结果见下表(   表示bug,    表示不准确,下同):
required/空
jQuery 1.4.4 Attr() – demo
jQuery 1.6.3 Attr() – demo
jQuery 1.8.3 Prop() – demo
MooTools 1.4 getProperty() – demo
JS getAttribute() – demo
IE6
空字符串/undefinedrequired/undefined空字符串/undefined空字符串/null空字符串/null
IE10↘IE7| 同环境下搜狗兼容
undefined/undefinedrequired/requiredundefined/undefined-1/nullnull/null
IE9↘IE7|IE8↘IE7 |ieTester IE7
空字符串/undefinedrequired/undefined空字符串/undefined空字符串/null空字符串/null
IE10↘IE8
required/undefinedrequired/undefinedundefined/undefinedrequired/nullrequired/空字符串
IE8|IE9↘IE8| ieTester IE8
required/undefinedrequired/undefined空字符串/undefined空字符串/null空字符串/null
IE9 All
空字符串/undefinedrequired/undefinedundefined/undefined空字符串/null空字符串/null
IE10|FireFox17| Chrome21|Opera12
true/falserequired/undefinedtrue/false空字符串/null空字符串/null

注:1. IE10↘IE7表示IE10浏览器下IE7模式。
[size=1.05em]2. 最新的jQuery 1.8.3与1.6版本测试结果一致,这里未展示,可以点击这里查看。
3. jQuery prop()方法更惨!甚至原生的IE9浏览器都大bug!
[size=1.05em]表格如染坊,可见兼容性惨不忍睹!
[size=1.05em]尤其IE10浏览器下,IE7/IE8模式,类似required属性值获取,存在N多之前从未有过的毁灭打击。
[size=1.05em]连jQuery大神也背后中了一枪:
二、换个形式,寻找安慰
[size=1.05em]我就琢磨,是不是因为是html5的Boolean书写形式的原因,于是,改成了如下继续测试:
  1. <input required="required" />
复制代码

[size=1.05em]结果见下表:
required=requireddemo
jQuery 1.4.4 Attr()
jQuery 1.6.3 Attr()
MooTools 1.4 getProperty()
JS getAttribute()
IE6
requiredrequiredrequiredrequired
IE10↘IE7| 同环境下搜狗兼容
undefinedrequired-1null
IE9↘IE7|IE8↘IE7 |ieTester IE7
requiredrequiredrequiredrequired
IE10↘IE8
requiredrequiredrequiredrequired
IE8|IE9↘IE8 |ieTester IE8
requiredrequiredrequiredrequired
IE9 All
requiredrequiredrequiredrequired
IE10|FireFox17 |Chrome21|Opera12
truerequiredrequiredrequired

[size=1.05em]哦,卖糕的!IE10下IE7模式依然是,结果一模一样,看来与书写形式无关~~
[size=1.05em]写插件啊什么的,肯定要向下兼容的,因此,即使1.6.x有模有样,由于1.4.x拖了后腿,也不能直接使用attr()获取,唉,jQuery打酱油了!!
[size=1.05em]jQuery酱,不要桑心;看MooTools君也挂彩陪着你嘞!
三、自己动手,兼容处理
[size=1.05em]以及JS框架中自带方法或原生方法不能“一方通行”,那就在其基础上,对照测试数据,自己动手,丰衣足食。
[size=1.05em]jQuery下的处理
  1. (function($, undefined) {
  2.     $.fn.isRequired = function() {
  3.         var required;
  4.         if (document.querySelector) {
  5.             required = $(this).attr("required");
  6.             if (required === undefined || required === false) {
  7.                 return undefined;
  8.             }
  9.             return "required";
  10.         } else {
  11.             <span style="color: green;">// IE6, IE7</span>
  12.             var outer = $(this).get(0).outerHTML, part = outer.slice(0, outer.search(/\/?['"]?>(?![^<]*<['"])/));
  13.             return /\srequired\b/i.test(part)? "required": undefined;
  14.         }
  15.     };
  16. })(jQuery);
复制代码

[size=1.05em]也可以轻轻地点击这里查看:jquery-isRequired.js
[size=1.05em]于是(返回值类型与jQuery attr()方法靠齐):
console.log($("#input").isRequired());    // required或undefined
[size=1.05em]MooTools下的处理
MooTools的处理要简单的多,仔细对比测试结果,我们可以这么认为——只要返回值不是null,则"required".
[size=1.05em]
[size=1.05em]于是:
  1. Element.implement({
  2.     isRequired: function() {
  3.         return this.getProperty("required") !== null? "required": null;
  4.     }
  5. });
复制代码

[size=1.05em]也可以轻轻地点击这里查看:mt-isRequired.js
[size=1.05em]于是(返回值类型与MooTools getProperty()方法靠齐):
  1. console.log($("input").isRequired());    <span style="color: green;">// required或null</span>
复制代码

[size=1.05em]原生JS下的处理
代码如下:
  1. var $isRequired = function(ele) {
  2.     if (!ele || ele.nodeType !== 1) return;
  3.     var isRequired = null;
  4.     if (typeof window.screenX === "number") {
  5.         if (typeof ele.getAttribute("required") === "string") {
  6.             isRequired = 'required';
  7.         }
  8.     } else {
  9.         <span style="color: green;">// IE6, IE7, IE8</span>
  10.         var outer = ele.outerHTML, part = outer.slice(0, outer.search(/\/?['"]?>(?![^<]*<['"])/));
  11.         if (/\srequired\b/i.test(part)) isRequired = 'required';
  12.     }
  13.     return isRequired;
  14. };
复制代码

[size=1.05em]也可以轻轻地点击这里查看:js-isRequired.js
[size=1.05em]于是(返回值类型与MooTools getProperty()方法靠齐):
  1. console.log($isRequired(document.getElementById("input")));    <span style="color: green;">// required或null</span>
复制代码

[size=1.05em]以上方法,我均放在了一个页面中,方便测试,对比查看。您可以狠狠地点击这里:兼容处理required获取方法后demo
[size=1.05em]
[size=1.05em]测试数据参见下表:
[size=1.05em]<input required />以及<input data-type=required />测试
required/非required - demo
jQuery 1.4.4 isRequired()
jQuery 1.6.3 isRequired()
MooTools 1.4 isRequired()
JS $isRequired()
IE6
required/undefinedrequired/undefinedrequired/nullrequired/null
IE10↘IE7| 同环境下搜狗兼容
required/undefinedrequired/undefinedrequired/nullrequired/null
IE9↘IE7|IE8↘IE7 |ieTester IE7
required/undefinedrequired/undefinedrequired/nullrequired/null
IE10↘IE8
required/undefinedrequired/undefinedrequired/nullrequired/null
IE8|IE9↘IE8 |ieTester IE8
required/undefinedrequired/undefinedrequired/nullrequired/null
IE9 All
required/undefinedrequired/undefinedrequired/nullrequired/null
IE10|FireFox17| Chrome21|Opera12
required/undefinedrequired/undefinedrequired/nullrequired/null

[size=1.05em]哦哈哈,终于干净了一把
[size=1.05em]//zxx: 下面为广告~~注意不要勿点~~嘻嘻~~

四、小小扩展,一劳永逸
[size=1.05em]以上的只是针对required判断的方法,其实,同样的原理,我们可以小小扩展,以后类似autofocus, novalidate这些Boolean型属性,都可以用来验证啦!
//zxx: checked, disabled虽然也是Boolean型,但是,低版本IE支持之,因此,使用自带方法如prop()即可。
[size=1.05em]以jQuery环境举例,我们扩展个hasProp()方法:
  1. (function($, undefined) {
  2.     $.fn.hasProp = function(prop) {
  3.         if (typeof prop !== "string") return undefined;
  4.         var hasProp = false;
  5.         if (document.querySelector) {
  6.             var attrProp = $(this).attr(prop);
  7.             if (attrProp !== undefined && attrProp !== false) {
  8.                 hasProp = true;
  9.             }
  10.         } else {
  11.             // IE6, IE7
  12.             var outer = $(this).get(0).outerHTML, part = outer.slice(0, outer.search(/\/?['"]?>(?![^<]*<['"])/));
  13.             hasProp = new RegExp("\\s" + prop + "\\b", "i").test(part);
  14.         }
  15.         return hasProp;
  16.     };
  17. })(jQuery);
复制代码

[size=1.05em]于是,就可以测试了,您可以狠狠地点击这里:hasProp()扩展方法测试demo
[size=1.05em]结果:
[size=1.05em]JS文件可以轻轻地点击这里查看:jquery-hasProp.js
五、驱车赶路,慧然离去
[size=1.05em]不得不吐槽。IE10浏览器,看上去还有点风光,可以,或许正因为其大大支持了HTML5的表单相关特定,导致其向下的兼容模式(IE7/IE8/IE9)在处理的时候,偷工减料(直接从渲染层面把一些HTML5属性置为普通或怪异识别——长相正常,内部腐败),以至于在一些属性获取的时候,bug横生。本文介绍的bug还是可以通过其他手段修复的。下一篇文章要介绍的问题,可以说是叫天天不应叫地地不灵。
[size=1.05em]本文的测试结果要感谢胡总,郑明丽,赵倩的浏览器大力支持。不过,还有N多其他浏览器,xp环境的搜狗,win7环境遨游,360之流,或者win8下面的IE10等等;如果有不同的测试结果,欢迎(非常感谢!)提出!
苦逼的兼容性问题,sign~
原创文章,转载请注明来自张鑫旭-鑫空间-鑫生活[http://www.zhangxinxu.com]

友荐云推荐
回复

使用道具 举报

手机版|Archiver|w3cvip.com  

GMT+8, 2013-2-12 07:33 , Processed in 0.054455 second(s), 29 queries .

Powered by Discuz! X2.5

© 2001-2012 Comsenz Inc.

回顶部