文章/答案/技术大牛

发布

社区首页 >问答首页 >使用polyfills的html5表单-值得吗？

问使用polyfills的html5表单-值得吗？
EN

Stack Overflow用户

提问于 2012-01-31 00:52:31

回答 3查看 22K关注 0票数 42

尽管围绕html5表单的讨论很多，但在我看来，在大多数情况下，您这样做是在制造额外的工作。

以datepicker字段为例。它的原生html5实现在每个浏览器中呈现方式都不同。此外，对于不支持此功能的浏览器，您的polyfilled解决方案(例如jquery UI )的呈现方式也会有所不同。

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

我很想听一些这方面的真实世界经验，因为我对所有的议论都很恼火！

html

forms

polyfills

webshim

回答 3

Stack Overflow用户

回答已采纳

发布于 2012-02-04 02:16:24

首先，我是webshims lib的创建者(其中一个polyfills，现在已经不再维护了)。回答你的问题：

是否值得为项目创建表单polyfill？

不，只为一个项目做这件事真的很难。嗯，我已经做到了，只是因为我想使用现代技术。

在项目中使用像webshims lib这样的表单polyfill值得吗？

是的，绝对是！原因如下：

1.很好的标准化声明性标记API

在包含webshims和脚本后，请执行以下操作：

//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也是如此。这里只有两个例子：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可以给你两全其美。

自定义约束验证

聚脂填充件

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

现在，重点是：

仍然可以在没有JS
的情况下工作，现代浏览器只加载定制代码(最小3KB/gzip)，旧浏览器加载额外的应用编程接口(最小约13kb /gzip)(表单包含的不仅仅是约束验证应用编程接口，例如还有自动聚焦、占位符、输出等)

定制日期字段的特殊示例是什么？

没问题：

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

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

还有这里：

在现代的browsers

modern浏览器中，

仍然可以在没有JS的情况下工作，只加载UI和UI-API胶水，而不加载DOM-API (valueAsNumber、API

现在，最好的来了：

//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 (大多数客户端和大多数设计人员都会喜欢您，因为它在没有JS的mobile!!!)
still works中具有不同的UI。在现代browsers
modern浏览器中，只加载UI和UI-API胶水，而不加载DOM-API (valueAsNumber、API

票数 85

Stack Overflow用户

发布于 2014-06-02 11:00:48

为了支持Alexander的webshims回答，我从UX、UI和前端的角度对HTML5输入的跨浏览器行为进行了大量的研究。我的结论是，要想在不同设备和浏览器之间实现更好的行为，唯一的方法就是使用像webshims这样的polyfill。这在很大程度上是因为无法利用设备上的本机功能，如用于日期的滚筒和用于数字的数字键盘，而没有一种方法来支持没有实现这些功能的桌面浏览器。

以下是日期输入在不同本机实现和流行插件上的行为分析：

Date input analysis - Google spreadsheet

(您可以看到webshims如何从所有实现中获得最佳效果)

以下是对现实世界中输入类型在常见浏览器中的本机行为和webshim回退的分析：

UX analysis of HTML5 inputs with webshim fallback - Google spreadsheet

以下是用于分析这些输入的演示页面：

HTML5 inputs page demo - CodePen

票数 5

Stack Overflow用户

发布于 2013-03-07 13:21:37

我也怀疑，是否真的值得使用polyfill层而不是直接使用jquery UI。在使用webshims lib和HTML5之后，我可以立即看到javascript代码要少得多。不再需要验证插件。感谢Alexander创建并支持了这个神奇的polyfill，webshims lib。下面是一个在表单的提交单击中进行ajax调用的示例。

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/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>

票数 4

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/9067536

复制

相似问题

问使用polyfills的html5表单-值得吗？
EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用polyfills的html5表单-值得吗？EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用polyfills的html5表单-值得吗？
EN