pcBeta 发表于 2014-1-7 14:01

更智能的 IE11 –电话号码格式自动检测


随着系统和触摸设备的进步,设备和软件的整合也更加紧密。无缝的网页体验更是发展的趋势。http://static.cdn.pcbeta.com/data/attachment/album/201401/07/135308yiiipu2pyhih6gi5.pnghttp://static.cdn.pcbeta.com/data/attachment/album/201401/07/135308x1crixj5mmffcvzi.png
而网页中的链接是我们和网页交互最基本的途径,点击链接我们可以前往网站、发送邮件以及拨打电话。在传统的网页开发中,这些都可以实现,但是需要单独的代码。例如给800-xxxx-xxxx添加电话号码的代码是 <a href=”800-xxxx-xxxx”>800-xxxx-xxxx</a>。这样当我们点击到这串号码的时候,系统就会自动调用像Skype 和 Lync 支持电话功能的软件。http://static.cdn.pcbeta.com/data/attachment/album/201401/07/135308ps8xga474z5exxop.png
几行代码虽然很轻松,但是如果有更智能的方法我们会更加乐意使用的。而这次IE11 考虑到了更加智能的方法:IE11 可以自动检测出电话号码并加上链接。http://static.cdn.pcbeta.com/data/attachment/album/201401/07/13530818f1ijid1qmwqb1f.png
而我们要做的非常简单,甚至什么都不用做,只要我们写下的电话号码格式是标准的格式,而具体支持哪些标准格式,微软为我们提供了完整的列表,点击查看。

IE11自动检测电话号码的功能支持网页中几乎所有元素,常见的 p,div和标题,甚至在对话框,导航和iframe框架内都可以自动识别。而且不需要任何代码就可以实现自动检测识别。


同时,是否启用自动检测电话号码功能是由我们完全控制的:
·      要对某个元素(及其子元素)启用该行为,可将 x-ms-format-detection 属性设置为 "phone"或 "all"。·      要对某个元素(及其子元素)禁用该行为,可将 x-ms-format-detection 属性设置为 "none"。·      要对某个网页禁用该行为,可使用 meta 元素:<meta name="format-detection" content="telephone=no"/>·      要使用 JavaScript 有选择性的控制该行为,可使用 setAttribute 更改关联元素或其父项的 x-ms-format-detection属性的值。 (注意,这需要在该元素或父项在DOM 中呈现之前完成;不支持动态更改。)

目前自动识别电话号码功能仅支持Windows UI 的 IE11,主要是出于 Windows UI 的IE11主要使用在拥有触摸功能的设备上,自动为电话号码添加上链接可以大大方便我们的点击成功率并且提高使用的效率。对于不少可能会忘记在网页中为电话号码添加链接的开发者们来说,IE11 贴心的小功能可以节省不少时间呢。

关于电话号码格式识别更多介绍和文档可以参考msdn 。

李步智 发表于 2014-1-23 22:21

这么好的帖子,几天了我来坐沙发。
页: [1]
查看完整版本: 更智能的 IE11 –电话号码格式自动检测