html5表单与polyfills – 是值得吗？

尽管所有的html5形式的嗡嗡声，在我看来，似乎你正在创造额外的工作，在大多数情况下，通过这条路线。 @H_404_2@例如，拿一个日期戳字段。这种原生html5实现在每个浏览器中呈现不同。此外，您的polyfilled解决方案(例如jquery UI)，对于不支持此功能的浏览器，也将不同地渲染。

@H_404_2@现在，我们已经为同一种形式引入了多个定制和维护点，当我们有一个完美的工作和统一的解决方案与jquery！

@H_404_2@我很想听听在这个领域的一些真实世界的经验，因为我很恼火的所有的嗡嗡声！

解决方法

首先我是 webshims lib的创建者(那些polyfills之一，不再维护)。回答你的问题： @H_404_2@是否值得为一个项目创建一个表单polyfill？

@H_404_2@不，这是真的很难做到只是一个项目。好吧，我做到了，只是因为我想使用现代技术。

@H_404_2@是否值得使用表单polyfill像webshims lib一个项目？

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

@H_404_2@好的标准化声明式标记API

@H_404_2@在包括webshims和脚本之后，以下内容：

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

@H_404_2@您可以简单地将窗口小部件和约束写入窗体：

<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" />

@H_404_2@这将创建3个不同的小部件，每个配置不同。没有额外的JS需要只是标准化，干净和精益的代码。

@H_404_2@2.标准化DOM-API

@H_404_2@DOM API也是如此。这里只是两个例子：Combining two date fields和combining a range field with a date field。

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

@H_404_2@在旧浏览器中优雅地降级，在现代浏览器中工作良好。

@H_404_2@4.在现代浏览器中减少文件大小

@H_404_2@特别适合手机(iOS 5，黑莓支持日期为例)

@H_404_2@5.更好的用户体验[主要是移动]

@H_404_2@更好的移动UX(更好的输入UI的触摸，更好的性能，适合系统)，如果你使用它：type=”email”，type=”number”和type=”date”/type=”range”

@H_404_2@但是，可定制性呢？

@H_404_2@我是一个更大的代理的开发人员，你是绝对正确的大多数客户，大多数设计师不会容忍很多差异，但我仍然想使用现代技术，这意味着webshims lib可以给你两个世界的最好的。

@H_404_2@自定义约束验证

@H_404_2@polyfilling部分

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

@H_404_2@自定义错误气泡的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; 
    });
});

@H_404_2@生成以下标记：

<!-- 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>

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

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

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

@H_404_2@自定义有效性警报的文本：

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

@H_404_2@现在，关键是：

@H_404_2@>仍然工作没有JS
>现代浏览器只加载自定义代码(3kb / gzipped)和旧浏览器加载额外的API(约13kb / gzip)(表单包含的不仅仅是约束验证API，例如还有自动对焦，占位符，输出等)

@H_404_2@什么是你的特殊例子，定制日期字段？

@H_404_2@没问题：

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

$.webshims.polyfill('forms forms-ext');

@H_404_2@还在这里：

@H_404_2@>仍然工作没有JS在现代浏览器
>现代浏览器只加载UI和UI-API粘合，而不是DOM-API(valueAsNumber，valueAsDate …)

@H_404_2@现在，这里是最好的：

//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');

@H_404_2@>更少的文件大小和更好的UX的移动浏览器(大多数客户和大多数设计师会爱你在移动的不同的UI！)>仍然工作没有JS在现代浏览器>现代浏览器只加载UI和UI-API粘合，而不是DOM-API(valueAsNumber，valueAsDate …)

html5表单与polyfills – 是值得吗？

解决方法

猜你在找的HTML5相关文章