带有 polyfills 的 html5 表单 - 值得吗？

Posted 2023-02-18

【中文标题】带有 polyfills 的 html5 表单 - 值得吗？

【英文标题】：html5 forms with polyfills - is it worth it?

【发布时间】：2012-02-22 11:07:21

【问题描述】：

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

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

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

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

【问题讨论】：

为什么原生 html5 实现不应该在每个浏览器中以不同的方式呈现？在许多不同浏览器中查看一个网站的唯一人是网页设计师。可用性的重要一点是它在所有网站的一个浏览器中看起来都一样，而不是您的网站在所有浏览器中看起来都一样。

以我的经验，设计师和客户不能接受这一点。大多数人希望这些元素在所有浏览器中都与他们的主题非常匹配。

我不确定想要统一的表单元素外观和感觉会让你成为一个糟糕的设计师。此外，客户通常也想要同样的东西。我不认为我也可以解雇他们。

一个 ios 设备将为日期选择器呈现可爱的*** UI，这绝对是对你在 javascript 中搞砸的任何东西的巨大改进。大多数移动设备为电子邮件或数字字段呈现自定义键盘。让设备做他们最擅长的事情。

而且 IOS 轮不起作用 ;) 在 IOS 中，它说支持必填字段，但他们不验证表单，一直很头疼！

【参考方案1】：

首先，我是 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 也是如此。这里仅举两个例子：Combining two date fields 和 combining a range field with a date field。

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

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

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

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

5。更好的用户体验 [主要是移动设备]

更好的移动 UX（更好的触摸输入 UI、更好的性能、适合系统），如果您正在使用它：type="email"、type="number" 和 type="date"/type="range"

但是，可定制性呢？

我是一家大型机构的开发人员，您说得对，大多数客户和大多数设计师都不会容忍太大的差异，但我仍然想使用现代技术，这意味着 webshims lib 可以为您提供两全其美的优势.

自定义约束验证

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

现在，重点是什么：

没有 JS 仍然可以工作 现代浏览器只加载自定义代码（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');

还有这里：

在现代浏览器中仍然可以在没有 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');

更小的文件大小和更好的移动浏览器用户体验（大多数客户和大多数设计师都会喜欢你在移动设备中拥有不同的用户界面！！！） 在现代浏览器中仍然可以在没有 JS 的情况下工作 现代浏览器仅加载 UI 和 UI-API 胶水，但不加载 DOM-API（valueAsNumber、valueAsDate...）

【讨论】：

谢谢，亚历山大。实际上，我上周花了很多时间研究 webshim——我什至在本地运行了一个示例——令人惊叹的工作，谢谢！我将尝试一个详尽的表单示例并了解更多信息。

另外，还有一件事。在 asp.net MVC 中，我们能够在服务器端代码中为类定义数据注释。这些注释定义并提供服务器端和客户端的验证（通过 jquery 表单验证插件和“不显眼的验证”）。大多数 MVC 开发人员都与此结盟，因为它使他们在进行验证时的生活变得更加轻松。我还将通过自定义不显眼的脚本来寻找与 2 结婚的最简单方法...

alexander，你能告诉我如何不让类型电子邮件弹出框在几秒钟后消失（隐藏）吗？这似乎是默认行为，我如何改变它以保持可见，直到我点击输入字段。看起来它正在javascript文件中发生。那么如何正确改变呢。

谢谢亚历山大，还有一个问题。我看到 webshims 使用像“ws-po-box”这样的类创建了这个动态错误 div 来显示错误消息。这些类名是否可配置，以便我可以提供我网站的现有错误类名？更好的是，我们能否配置为此错误消息生成标记的方式（我公司的样式指南/模式库建议使用特定的标记样式）？如果它已经存在，请指向我的文档。非常感谢。

哦，这里是afarkas.github.io/webshim/demos/demos/forms.html#UI-ival。我的错。

【参考方案2】：

为了支持 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

【参考方案3】：

我也很怀疑，如果真的值得通过 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>