42

尽管所有关于 html5 表单的嗡嗡声，但在我看来，在大多数情况下，通过这条路线，您正在创造额外的工作。

以日期选择器字段为例。其原生 html5 实现在每个浏览器中呈现不同。此外，对于不支持此功能的浏览器，您的 polyfill 解决方案（例如 jquery UI）也会以不同的方式呈现。

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

我很想听听这个领域的一些真实世界的经历，因为我对所有的嗡嗡声感到恼火！

4

3 回答 3

85

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

是否值得为项目创建表单 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 API 也是如此。这里仅举两个例子：组合两个日期字段和组合一个范围字段和一个日期字段。

3. 在现代浏览器中无需 JS 即可工作

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

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

特别适用于移动设备（例如 iOS 5，Blackberry 支持日期）

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

现在，重点是什么：

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

您的特殊示例是什么，自定义日期字段？

没问题：

//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. 更小的文件大小和更好的移动浏览器用户体验（大多数客户和大多数设计师会喜欢你在移动设备中拥有不同的用户界面！！！）
  2. 在现代浏览器中仍然可以在没有 JS 的情况下工作
  3. 现代浏览器仅加载 UI 和 UI-API 胶水，但不加载 DOM-API（valueAsNumber、valueAsDate...）
于 2012-02-03T18:16:23.777 回答
5

为了支持 Alexander 的 webshims 回答，我从 UX、UI 和前端的角度对 HTML5 输入的跨浏览器行为进行了大量研究。我的结论是，在设备和浏览器中获得首选行为的唯一方法是使用像 webshims 这样的 polyfill。这在很大程度上与无法在设备上使用本机功能有关，例如用于日期的桶形滚轮和用于数字的数字键盘，而同时也无法支持未实现这些功能的桌面浏览器。

以下是日期输入在不同原生实现与流行插件上的行为分析：
日期输入分析 - Google 电子表格
（您可以看到 webshims 如何从所有实现中获得最佳效果）

以下是对现实世界输入类型如何在普通浏览器中本机和使用 webshim 后备的分析：
使用 webshim 后备的 HTML5 输入的 UX 分析 - Google 电子表格

这是用于分析这些输入的演示页面：
HTML5 输入页面演示 - CodePen

于 2014-06-02T03:00:47.627 回答
4

我也很怀疑，如果真的值得通过 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>
于 2013-03-07T05:21:36.580 回答