-webkit-appearance实现iPad端日历框样式教程

时间:2015-10-11 15:01 来源:http://toutiao.com/m5186012317 作者:前端观察点击:次

　你会看到这个提示，那是因为你的系统无法识别某栏目的模型信息，或者你新建模型后，没为这个模型设计单独的模板。不同模型的文档浏览页的模板为：article_模型名字标识.htm 如“article_article.htm”，更多的信息你可以在频道模型管理的地方查看。

文件类型 内容：
模板调用标记：

.exe

语言内容：
模板调用标记：

简体中文

软件类型 内容：
模板调用标记：

国产软件

授权方式 内容：
模板调用标记：

共享软件

操作系统 内容：
模板调用标记：

软件等级 内容：
模板调用标记：

官方网址 内容：
模板调用标记：

演示网址 内容：
模板调用标记：

软件大小课程时长 内容：
模板调用标记：

下载资料 内容：
模板调用标记：

详细介绍 内容：
模板调用标记：

随着iPad的盛行，很多人开始在iPad上看网页，对于携程这样一个旅行网来说，日历控件的使用是必不可少的，然后目前使用自定义的日历控件在iPad上会影响用户的操作（使用input文本框来模拟实现，会弹出键盘导致日历弹出层被覆盖等情况）。解决的方法肯定会有，而且方法应该也挺多的，但对于JS能力不强的我而言，想到的是利用HTML5中的input日历属性值。

最初在PC端做实验时，因为文本框（type=”text”）的默认表现形式与日历框（type=”date”）是不同的，为了实现类似文本框点击后弹出日历框，利用获得焦点和失去焦点来隐藏input框。这个方法我在PC端的Chrome浏览器里看到感觉似乎还OK，操作步骤如下图顺序展示所示：

-webkit-appearance实现iPad端日历框样式

点击查看demo效果 iPad Calendar : http://ued.ctrip.com/blog/wp-content/uploads/2012/11/iPad-Calendar.html

但现在要考虑的是在iPad上的表现，对于目前这个效果在iPad上表现是完全不行的，JS代码也不合理，试了几次虽然还是可以通过焦点获取和失去的同时来让文本框获得日历框的value，看着代码感觉总是不爽，总感觉多此一举，如果能直接改变日历框（type=”date”）的表现方式不是更直接么。

有想法就想办法实现，找了找，发现-webkit-appearance属性有一个属性值是textarea，可以直接让日历框的默认表现改成文本框的表现，哦啦，搞定，只需要一句样式代码就让iPad上的日历框变成文本框，并且还是可以取得日历的值。

input[type="date"] {-webkit-appearance:textarea;}

-webkit-appearance实现iPad端日历框样式

在iPad中点击查看demo效果：http://ued.ctrip.com/blog/wp-content/uploads/2012/11/iPad-Calendar1.html

这篇文章主要是对input的date类型做一个实验，以此让自己不得不感慨现在的CSS是越来越强大了，需要学习和了解的东西太多了

本文作者：linxz

地址：http://ued.ctrip.com/blog/?p=3350

下载级别 内容：
模板调用标记：

需要金币 内容：
模板调用标记：

课程难度 内容：
模板调用标记：

(责任编辑：zengmumu)

-webkit-appearance实现iPad端日历框样式教程

时间:2015-10-11 15:01 来源:http://toutiao.com/m5186012317 作者:前端观察 点击:次

时间:2015-10-11 15:01 来源:http://toutiao.com/m5186012317 作者:前端观察点击:次