尽管所有的html5形式的嗡嗡声,在我看来,似乎你正在创造额外的工作,在大多数情况下,通过这条路线。

例如,拿一个日期戳字段。这种原生html5实现在每个浏览器中呈现不同。此外,您的polyfilled解决方案(例如jquery UI),对于不支持此功能的浏览器,也将不同地渲染。

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

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

解决方法

首先我是 webshims lib的创建者(那些polyfills之一,不再维护)。回答你的问题:

是否值得为一个项目创建一个表单polyfill?

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

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

是的,一点没错!这里是为什么:

好的标准化声明式标记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,黑莓支持日期为例)

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 / gzipped)和旧浏览器加载额外的API(约13kb / 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');

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

html5表单与polyfills – 是值得吗?的更多相关文章

  1. 使用HTML5做的导航条详细步骤

    这篇文章主要介绍了用HTML5做的导航条详细步骤,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

  2. 详解HTML5中的picture元素响应式处理图片

    这篇文章主要介绍了详解HTML5中的picture元素响应式处理图片,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

  3. html5利用canvas实现颜色容差抠图功能

    这篇文章主要介绍了html5利用canvas实现颜色容差抠图功能,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下

  4. HTML5拖拽功能实现的拼图游戏

    本文通过实例代码给大家介绍了HTML5拖拽功能实现的拼图游戏,代码简单易懂,非常不错,具有一定的参考借鉴价值,需要的朋友参考下吧

  5. HTML5实现直播间评论滚动效果的代码

    这篇文章主要介绍了HTML5实现直播间评论滚动效果的代码,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

  6. 使用Html5多媒体实现微信语音功能

    这篇文章主要介绍了使用Html5多媒体实现微信语音功能,需要的朋友可以参考下

  7. HTML5 播放 RTSP 视频的实例代码

    目前大多数网络摄像头都是通过 RTSP 协议传输视频流的,但是 HTML 并不标准支持 RTSP 流。本文重点给大家介绍HTML5 播放 RTSP 视频的实例代码,需要的朋友参考下吧

  8. html5 拖拽及用 js 实现拖拽功能的示例代码

    这篇文章主要介绍了html5 拖拽及用 js 实现拖拽,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

  9. HTML5自定义视频播放器源码

    这篇文章主要介绍了HTML5自定义视频播放器源码,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下

  10. HTML5新增form控件和表单属性实例代码详解

    这篇文章主要介绍了HTML5新增form控件和表单属性实例代码详解,需要的朋友可以参考下

随机推荐

  1. 微信小程序canvas实现水平、垂直居中效果

    这篇文章主要介绍了小程序中canvas实现水平、垂直居中效果,本文图文实例代码相结合给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下

  2. 使用HTML5做的导航条详细步骤

    这篇文章主要介绍了用HTML5做的导航条详细步骤,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

  3. H5最强接口之canvas实现动态图形功能

    这篇文章主要介绍了H5最强接口之canvas实现动态图形功能,需要的朋友可以参考下

  4. Canvas高级路径操作之拖拽对象的实现

    这篇文章主要介绍了Canvas高级路径操作之拖拽对象的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

  5. html5视频自动横过来自适应页面且点击播放功能的实现

    这篇文章主要介绍了h5视频自动横过来自适应页面且点击播放,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

  6. 详解HTML5中的picture元素响应式处理图片

    这篇文章主要介绍了详解HTML5中的picture元素响应式处理图片,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

  7. canvas像素点操作之视频绿幕抠图

    这篇文章主要介绍了canvas像素点操作之视频绿幕抠图的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

  8. html5利用canvas实现颜色容差抠图功能

    这篇文章主要介绍了html5利用canvas实现颜色容差抠图功能,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下

  9. canvas绘制视频封面的方法

    这篇文章主要介绍了canvas绘制视频封面的方法的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

  10. HTML5拖拽功能实现的拼图游戏

    本文通过实例代码给大家介绍了HTML5拖拽功能实现的拼图游戏,代码简单易懂,非常不错,具有一定的参考借鉴价值,需要的朋友参考下吧

返回
顶部