HTML5格式与polyfills – 这是值得的吗？

尽pipe围绕html5表单的所有讨论，在我看来，像在大多数情况下，通过走这条路线，你正在创造额外的工作。

以dateselect器字段为例。 原生的html5实现在每个浏览器中都呈现不同的效果。 另外你的polyfilled解决scheme（例如jQuery UI），对于不支持这个function的浏览器，也会呈现不同的效果。

现在，我们已经为同一个表单引入了多个定制和维护点，当我们有一个完美的工作和统一的解决scheme与jQuery！

我很想听听这方面的一些真实世界的经验，因为我对所有的嗡嗡声感到恼火！

首先我是webshims lib的创build者（其中一个polyfill ，不再被维护）。 回答你的问题：

是否值得为项目创build表单填充？

不，对于一个项目来说，真的很难做到这一点。 那么，我已经做到了，只是因为我想用现代技术。

是否值得使用表单填充像webshims lib的项目？

是的，一点没错！ 这是为什么：

1.好标准化的声明式标记API

在包含webshim和脚本之后： 

//polyfill forms (constraint validation) and forms-ext (date, range etc.) $.webshims.polyfill('forms forms-ext');

您可以简单地将您的小部件和约束写入您的表单中： 

 <input type="date" /> <input type="date" min="2012-10-11" max="2111-01-01" /> <input type="range" disabled /> <input type="email" required placeholder="Yo you can use a placeholder" />

这将创build3个不同的小部件，每个都configuration不同。 没有额外的JS需要标准化，清洁和精益的代码。

2.标准化的DOM-API

同样的DOM API。 这里只是两个例子： 结合两个date字段，并结合一个范围字段和一个date字段 。

3.在现代浏览器中没有JS

在旧浏览器中优雅地降级，并且在现代浏览器中运行良好。

4.现代浏览器中的文件较小

特别适合移动（iOS 5，黑莓支持date为例）

5.更好的UX

如果您使用的是更好的移动用户体验（更好的input用户界面，更好的性能，适合系统）： type =“email” ， type =“number”和type =“date”/ type =“range”

但是，可定制性呢？

我是一个更大机构的开发人员，绝对是绝大多数客户，绝大多数devise师不会容忍太多差异，但我仍然希望使用现代技术，这意味着webshims lib可以为您提供两全其美的解决scheme。

自定义约束validation

polyfilling部分 

 //polyfill constraint validation $.webshims.polyfill('forms');

自定义错误泡泡的UI： 

 //on DOM-ready $(function(){ $('form').bind('firstinvalid', function(e){ //show the invalid alert for first invalid element $.webshims.validityAlert.showFor( e.target ); //prevent browser from showing native validation message return false; }); });

生成以下标记： 

 <!-- the JS code above will generate the following custom styleable HTML markup for the validation alert --> <span class="validity-alert-wrapper" role="alert"> <span class="validity-alert"> <span class="va-arrow"><span class="va-arrow-box"></span></span> <span class="va-box">Error message of the current field</span> </span> </span>

自定义无效/有效表单字段的样式： 

 .form-ui-invalid { border-color: red; } .form-ui-valid { border-color: green; }

自定义有效警报的文本： 

 <input required data-errormessage="Hey this is required!!!" />

而现在，有什么意义：

  1. 仍然没有JS的作品
  2. 现代浏览器只加载自定义代码（3kb min / gzipped），而旧浏览器则加载额外的API（大约13kb min / gzip）（表单包含的不仅仅是限制validationAPI，例如还有自动对焦，占位符，输出等等）

你的特殊例子是什么，定制date字段？

没问题： 

 //configure webshims to use customizable widget UI in all browsers $.webshims.setOptions('forms-ext', { replaceUI: true }); $.webshims.polyfill('forms forms-ext');

而且在这里：

  1. 在现代浏览器中仍然没有JS
  2. 现代浏览器只加载UI和UI-API胶水，而不加载DOM-API（valueAsNumber，valueAsDate …）

而现在，这里是最好的： 

 //configure webshims to use customizable widget UI in all non mobile browsers, but a customizable one in all desktop and all non-capable mobile browsers $.webshims.setOptions('forms-ext', { //oh, I know this is bad browser sniffing :-( replaceUI: !(/mobile|ipad|iphone|fennec|android/i.test(navigator.userAgent)) }); $.webshims.polyfill('forms forms-ext');
  1. 更less的文件大小和更好的移动浏览器用户体验（大多数客户和大多数devise师都会因为拥有不同的移动用户界面而爱上你）
  2. 在现代浏览器中仍然没有JS
  3. 现代浏览器只加载UI和UI-API胶水，而不加载DOM-API（valueAsNumber，valueAsDate …）

为了支持亚历山大的webshims答案，我已经从UX，UI和前端angular度对HTML5input的跨浏览器行为做了大量的研究。 我的结论是跨设备和浏览器优先行为的唯一方法是使用像webshims一样的polyfill。 其中大部分与不能利用滚筒滚筒上的date和数字小键盘上的原生function，而没有办法支持不实现这些function的桌面浏览器。

这是一个分析dateinput如何在不同的本地实现vsstream行的插件上运行：
dateinput分析 – Google电子表格
（你可以看到webshims是如何获得最好的实现）

以下分析了真实世界的inputtypes如何在本地普通浏览器中运行，以及如何使用webshim回退：
使用webshim fallback – Google电子表格对HTML5input进行UX分析

以下是用于分析这些input的演示页面：
HTML5input页面演示 – CodePen

我也怀疑，如果真的值得通过填充层而不是使用直接的jQuery UI。 在使用webshims lib和HTML5之后，我马上就可以看到有更多的JavaScript代码。 不再需要validation插件。 感谢亚历山大创build和支持这个美好的polyfill，webshims lib。 这里是一个例子，在表单的提交点击进行ajax调用。 

 <!DOCTYPE html> <html> <head> <script src="jquery-1.9.1.js" type="text/javascript"></script> <script src="http://code.jquery.com/ui/1.10.1/jquery-ui.js" type="text/javascript"></script> <script> // set options for html5shiv if(!window.html5){ window.html5 = {}; } window.html5.shivMethods = false; </script> <script src="webshims/js-webshim/minified/extras/modernizr-custom.js"></script> <script src="webshims/js-webshim/minified/polyfiller.js"></script> <script class="example"> $.webshims.setOptions({ //we do not use any DOM-/JS-APIs on DOM-ready, so we do not need to delay the ready event <- good against fouc waitReady: false }); //load all polyfill features $.webshims.polyfill('forms forms-ext'); </script> <script type="text/javascript"> $(function(){ var frm = $('#tstForm'); frm.submit(function () { var someDate=$('#someDate').val(); alert('someDate:'+someDate); // you can make your ajax call here. return false; }); }); </script> </head> <body> <form id="tstForm"> Some Date:<input id="someDate" name="someDate" type="date" min="2013-01-01" max="2013-06-01" ></input> Full Name:<input id="fullName" name="fullName" type="text" required></input> Age:<input id="age" name="age" type="number" required min="18" max="120"></input> <input type="submit" value="Submit"/> </form> </body> </html>
Interesting Posts