移动端Web不安分的小键盘

移动端Web不安分的小键盘

在进行Webapp开发的过程中遇到了这样的问题——在chrome上模拟很完美的页面，在移动端就变了样子，罪魁祸首就是不安分的小键盘～

Bug再现

我们先看看PC端的表现：

不错不错，这个日历的大小位置都还和符合人类的正常审美
让我们上真机调试一下：

这是一个非常实实在在的bug，对用户体验造成了毁灭性打击！！！

诊断

这个原因很简单，因为上面所用的日期选择器是一个input，不加外接键盘的智能手机和平板电脑在面临这个元素的focus事件的时候都会下意识地掏出他的大宝贝：虚拟键盘～

解决

找到原因，当然要解决它

方法一：readonly

这是input的一个属性，浏览器兼容性很不错
这个属性的作用很简单，顾名思义，让这个input变为只读的。这也就意味着，这个元素的内容不可修改，浏览器看到这个属性就会克制自己掏出小键盘的欲望。
使用方法：
他的用法和disabled属性很相似，可以传值，也可以不赋值

<input