移动端Web不安分的小键盘

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

Bug再现

我们先看看PC端的表现：

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

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

诊断

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

解决

找到原因，当然要解决它

方法一：`readonly`

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

<input type="text" readonly="readonly" />
<input type="text" readonly=true />
<input type="text" readonly />

上面的写法都是ok的
readonly和disabled的区别在于，readonly的元素不能输入，但可以点击；disabled连元素被点击的权利都剥夺了。
**缺点：**在IOS上的Safari浏览器表现似乎有问题，我没有iphone没有办法验证，（待我找一部iphone验证一下，然后更新）

方法二：强行失焦

我们可以看出，当input触发focus之后小键盘才会弹出，那么我们只要趁浏览器“不注意”，先把交点消除就好了。
修改这个input的默认focus事件回调

input.addEventLister("focus",function(){document.activeElement.blur();
});

document.activeElement可以获取页面中被聚焦的元素，然后调用blur失焦就ok了。
（当然也可以采用下面的写法，原理是一样的：

input.addEventLister("focus",function(event){event.target.blur();
});

特殊情况：Element以及各种UI组件库

其实可能有很多小伙伴看出来了，我是直接使用了由饿了么前端团队开发的Element中的组件（是滴，我用了vue）。
这个解决方案就是直接加上属性:editable="false"(这里使用了v-bind的缩写)

<el-date-picker v-model="startDate" type="date" placeholder="预测开始日期" :editable="false">

这一点在官方文档里看得到

虽然我用过的UI库不多，但是大部分都会考虑到这一点，并在文档里说明。与其想无头苍蝇一样到处乱找，不如先仔细看看文档里有没有写到～～