iOS自定义键盘搜索键

之前知道HTML5的input属性,新增了一种type=search。当系统焦点在input[type=search]元素上时,iOS会自动更改键盘的确认按键为搜索,且按下后自动收齐键盘。

但是我尝试了一次,一直不成功,最后发现,原来是姿势不对。

input[type=search]必须放在一个form标签中,才会更改iOS键盘的效果。

效果如下图:

input[type=search]

还能通过一些webkit私有属性,自定义这个搜索框的样式,例如右边的XX,或者placeholder字体颜色等。

更多玩法,可以这篇文章:http://css-tricks.com/webkit-html5-search-inputs/

 

Html5之离线Web应用程序

2013-05-03更新:采用事件监听来优化二次刷新问题。

Html5一大新特性、同时也是非常吸引人的特性,就是其离线功能。它让Web从online延伸到了offline领域。

通过浏览器兼容性检查我们可以看到,除了IE9,几乎是全平台兼容此特性,让我们放开手脚去实现。

三部曲

1、准备manifest文件,格式如下。需注意里面的路径为相对manifest文件的路径

manifest编辑好后,保存为manifest.appcache。(很多老教程让我们保存成cache.manifest格式,不过我最近尝试过,要保存成appcache才能生效)

2、给HTML文档头部添加manifest清单支持

3、添加MIME类型,让服务器支持.appcache的文件类型

网上Apache的修改方式一大堆,我给来个nginx的,环境是Ubuntu 12.04

一些注意事项

上述三步之后,你就可以给你的应用添加离线功能,但是你会觉得用起来很别扭(起码一开始我是这样觉得的),有下面一些情况需要注意:

1、本地缓存更新时刻

浏览器第一次打开html文件的时候,访问manifest,下载所有缓存文件。

第二次打开html文件的时候,不论该html是否被添加到manifest的CACHE选项中,该html实际上已经被缓存,故此次打开,是加载的本地html。浏览器检查网络manifest是否有更新,如果有,下载新的manifest文件,并重新下载所有缓存内容。此时,新的本地缓存不会被显示,而是等待下次刷新页面后,才会显示。

2、使用Location.reload()来手动刷新页面

旧方案(不推荐):

每5s检查一次,并询问用户时候刷新页面,刷新页面后,新的本地缓存被显示出来。

新方案,监听updateready事件(推荐使用):

资料来源:http://www.html5rocks.com/zh/tutorials/appcache/beginner/

3、FALLBACK中的URL遵循同源规则,必须与manifest文件同源

我被这个问题纠结了好几天,一直搜索都找不到原因,一开始还怀疑是FALLBACK不支持ajax请求。

今天终于找到问题的原因:

Important All FALLBACK URLs must have the same origin as the manifest file. That is, they must be in the same domain and use the same access scheme.

参考资料

迟到的WebRebuild年会手札~

index_slogan.png

今年的Webrebuild主题是七年,寓意是《网站重构》这本书面世七年了~

s2162724.jpg

整个活动的详情就啰嗦了,因为有一位童鞋写了一篇很详细的记录,后面会附上地址。

什么是WebRebuild?

WebRebuild,顾名思义就是网站重构。

我个人一直认为,网站为什么要重构?就是要改变历史遗留下来的杯具的东西。

但如果全新制作设计的一个网站,还要重构吗?

7年的重构其实就是一本历史书,读史使人明志,以史为鉴,不要重蹈覆辙。

所以,重构永远都需要,只有经历过重构的人,才会深刻体会到语义化的含义,体会到行为、样式分离的好处,体会到重构的好处。

重构是一种微进化,不断地在积累量变,等待一次质变。

今年年会的亮点

继续阅读“迟到的WebRebuild年会手札~”