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

Question

提问by drogon

Despite all of the buzz around html5 forms, it seems to me like you are creating extra work, in most scenarios, by going this route.

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

Take, for example, a datepicker field. The native html5 implementation of this renders differently in every browser. In addition your polyfilled solution (jquery UI for instance), for a browser not supporting this feature, will also render differently.

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

Now, we have introduced multiple points of customization and maintenance for the same form, when we had a perfectly working and unified solution with jquery!

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

I'd love to hear about some real world experiences in this area, because I'm getting annoyed with all of the buzz!

我很想听听这方面的一些真实世界的经验，因为我对所有的嗡嗡声感到恼火！

Answer 1

回答by alexander farkas

First of all I'm the creator of webshims lib(one of those polyfills, which isn't maintained anymore). To answer your question:

首先，我是webshims lib（这些polyfill之一，不再维护）的创建者。回答你的问题：

Is it worth creating a forms polyfill for a project?

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

No, it is really hard to do this just for one project. Well, I have done it, simply because I want to use modern technologies.

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

Is it worth using a forms polyfill like webshims lib for a project?

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

Yes absolutely! And here is why:

是的，一点没错！这就是原因：

1. Nice standardized declarative Markup API

1. 漂亮的标准化声明式标记 API

After including webshims and scripting the following:

在包含 webshims 并编写以下脚本后：

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

You can simply write your widgets and your constraints into your form:

您可以简单地将小部件和约束写入表单：

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

This will create 3 different widgets and each are configured differently. No extra JS needed just standardized, clean and lean code.

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

2. Standardized DOM-API

2. 标准化的 DOM-API

Same goes to the DOM API. Here are just two examples: Combining two date fieldsand combining a range field with a date field.

DOM API 也是如此。这里只是两个示例：组合两个日期字段并将范围字段与日期字段组合。

3. works without JS in modern browsers

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

Degrades gracefully in old browsers and works well in modern ones.

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

4. Less file size in modern browsers

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

Especially good for mobile (iOS 5, Blackberry have support for date for example)

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

5. Better UX [mostly mobile]

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

Better mobile UX (better input UI for touch, better performance, fits to the system), if you are using it: type="email", type="number"and type="date"/type="range"

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

But still, what about customizability?

但是，可定制性呢？

I'm a developer in a bigger agency and you are absolutely right most clients and most designers won't tolerate much differences, but I still want to use modern technologies, which means webshims lib can give you the best of both worlds.

我是一家更大机构的开发人员，您是绝对正确的，大多数客户和大多数设计师不会容忍太多差异，但我仍然想使用现代技术，这意味着 webshims lib 可以为您提供两全其美的服务。

Customizing the constraint validation

自定义约束验证

The polyfilling part

填充部分

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

Customizing the UI for the error-bubble:

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

generates the following markup:

生成以下标记：

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

Customizing the style of an invalid/valid form field:

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

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

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

Customizing the text of the validity alert:

自定义有效性提醒的文本：

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

And now, what's the point:

现在，重点是什么：

still works without JS
modern browsers load only the customization code (3kb min/gzipped) and old browsers do load the additional API (about 13kb min/gzip) (forms include a lot more than just constraint validation API, for example there is also autofocus, placeholder, output and so on)

没有 JS 仍然有效
现代浏览器只加载自定义代码（3kb min/gzip），而旧浏览器会加载额外的 API（大约 13kb min/gzip）（表单包括的不仅仅是约束验证 API，例如还有自动对焦、占位符、输出等等）

And what is with your special example, customizing the datefield?

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

No problem:

没问题：

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

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

And also here:

还有这里：

still works without JS in modern browsers
modern browsers only load the UI and the UI-API glue, but not the DOM-API (valueAsNumber, valueAsDate...)

在现代浏览器中仍然可以在没有 JS 的情况下工作
现代浏览器只加载 UI 和 UI-API 胶水，而不加载 DOM-API（valueAsNumber、valueAsDate...）

And now, here comes the best:

现在，最好的来了：

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

less file size and a better UX for mobile browsers (most clients and most designers will love you for having a different UI in mobile!!!)
still works without JS in modern browsers
modern browsers only load the UI and the UI-API glue, but not the DOM-API (valueAsNumber, valueAsDate...)

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

Answer 2

回答by davidelrizzo

In support of Alexander's webshims answer I have done considerable research into the cross browser behaviour of the HTML5 inputs from a UX, UI and front-end perspective. My conclusion is that the only way to have prefered behaviour across devices and browsers is to use a polyfill like webshims. Much of this has to do with not being able to utilise native functionality on devices like barrel rollers for dates and numeric keypads for numbers without also having a way to support desktop browsers which do not implement those features.

为了支持 Alexander 的 webshims 答案，我从 UX、UI 和前端的角度对 HTML5 输入的跨浏览器行为进行了大量研究。我的结论是，跨设备和浏览器获得偏好行为的唯一方法是使用类似 webshims 的 polyfill。这在很大程度上与无法在设备上使用本机功能有关，例如用于日期的滚轮和用于数字的数字小键盘，而没有办法支持没有实现这些功能的桌面浏览器。

Here is an analysis of how a date input behaves on different native implementations vs popular plugins:
Date input analysis - Google spreadsheet
(You can see how webshims gets the best off all implementations)

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

Here is an analysis of how real world input types behave across common browsers natively and with a webshim fallback:
UX analysis of HTML5 inputs with webshim fallback - Google spreadsheet

以下是对真实世界的输入类型在原生浏览器和 webshim 回退的情况下如何表现的
分析：HTML5 输入的 UX 分析与 webshim 回退 - Google 电子表格

Here is the demo page used to analyse these inputs:
HTML5 inputs page demo - CodePen

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

Answer 3

回答by Karthik Sankar

I was skeptical too, if it is really worth to go though the polyfill layer instead of using straight jquery UI. After using webshims lib and HTML5, I could immediately see there is much lesser javascript code. No validation plugin required anymore. Thanks Alexander for creating and supporting this wonderful polyfill, webshims lib. Here is an example to make an ajax call in the submit click of a form.

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

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

提问by drogon

回答by alexander farkas

Is it worth creating a forms polyfill for a project?

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

Is it worth using a forms polyfill like webshims lib for a project?

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

1. Nice standardized declarative Markup API

1. 漂亮的标准化声明式标记 API

2. Standardized DOM-API

2. 标准化的 DOM-API

3. works without JS in modern browsers

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

4. Less file size in modern browsers

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

5. Better UX [mostly mobile]

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

But still, what about customizability?

但是，可定制性呢？

Customizing the constraint validation

自定义约束验证

And what is with your special example, customizing the datefield?

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

回答by davidelrizzo

回答by Karthik Sankar

相关推荐

最近更新

标签

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

提问by drogon

回答by alexander farkas

Is it worth creating a forms polyfill for a project?

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

Is it worth using a forms polyfill like webshims lib for a project?

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

1. Nice standardized declarative Markup API

1. 漂亮的标准化声明式标记 API

2. Standardized DOM-API

2. 标准化的 DOM-API

3. works without JS in modern browsers

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

4. Less file size in modern browsers

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

5. Better UX [mostly mobile]

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

But still, what about customizability?

但是，可定制性呢？

Customizing the constraint validation

自定义约束验证

And what is with your special example, customizing the datefield?

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

回答by davidelrizzo

回答by Karthik Sankar

相关推荐

IE7 HTML/CSS margin-bottom 错误

Html 如何在悬停时更改图像的颜色

Html CSS3 不透明度 - 仅背景

Html Firefox 中的 span 标签高度

相关推荐

最近更新

标签