例如,拿一个日期戳字段。这种原生html5实现在每个浏览器中呈现不同。此外,您的polyfilled解决方案(例如jquery UI),对于不支持此功能的浏览器,也将不同地渲染。
现在,我们已经为同一种形式引入了多个定制和维护点,当我们有一个完美的工作和统一的解决方案与jquery!
我很想听听在这个领域的一些真实世界的经验,因为我很恼火的所有的嗡嗡声!
解决方法
是否值得为一个项目创建一个表单polyfill?
不,这是真的很难做到只是一个项目。好吧,我做到了,只是因为我想使用现代技术。
是否值得使用表单polyfill像webshims lib一个项目?
是的,一点没错!这里是为什么:
好的标准化声明式标记API
//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" />
这将创建3个不同的小部件,每个配置不同。没有额外的JS需要只是标准化,干净和精益的代码。
2.标准化DOM-API
DOM API也是如此。这里只是两个例子:Combining two date fields和combining a range field with a date field。
3.在现代浏览器中没有JS
在旧浏览器中优雅地降级,在现代浏览器中工作良好。
4.在现代浏览器中减少文件大小
特别适合手机(iOS 5,黑莓支持日期为例)
5.更好的用户体验[主要是移动]
更好的移动UX(更好的输入UI的触摸,更好的性能,适合系统),如果你使用它:type=”email”,type=”number”和type=”date”/type=”range”
但是,可定制性呢?
我是一个更大的代理的开发人员,你是绝对正确的大多数客户,大多数设计师不会容忍很多差异,但我仍然想使用现代技术,这意味着webshims lib可以给你两个世界的最好的。
自定义约束验证
polyfilling部分
//polyfill constraint validation $.webshims.polyfill('forms');
//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!!!" />
现在,关键是:
>仍然工作没有JS
>现代浏览器只加载自定义代码(3kb / gzipped)和旧浏览器加载额外的API(约13kb / gzip)(表单包含的不仅仅是约束验证API,例如还有自动对焦,占位符,输出等)
什么是你的特殊例子,定制日期字段?
没问题:
//configure webshims to use customizable widget UI in all browsers $.webshims.setOptions('forms-ext',{ replaceUI: true }); $.webshims.polyfill('forms forms-ext');
还在这里:
>仍然工作没有JS在现代浏览器
>现代浏览器只加载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');
>更少的文件大小和更好的UX的移动浏览器(大多数客户和大多数设计师会爱你在移动的不同的UI!)>仍然工作没有JS在现代浏览器>现代浏览器只加载UI和UI-API粘合,而不是DOM-API(valueAsNumber,valueAsDate …)