-webkit-appearance实现iPad端日历框样式的改变_-webkit-appearance: textarea;-CSDN博客

2012年11月1日

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

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

^? View Code XML

<form method="post" action="" id="frm_box">
	<input type="text" value="" id="txt_in" />
	<input type="date" id="date_in" />
</form>
<script type="text/javascript">
var t_in = document.getElementById("txt_in");
var d_in = document.getElementById("date_in");
var f_box = document.getElementById("frm_box");
 
window.onload = function() {
	d_in.style.display = "none";
 
	t_in.onfocus = function() {
		d_in.style.display = "block";
		t_in.style.display = "none";
	}
 
	t_in.onblur = function() {
		t_in.style.display = "block";
	}
 
	d_in.onchange = function() {
		d_in.style.display = "none";
		t_in.value = d_in.value;
	}
}
</script>