社区微信群开通啦,扫一扫抢先加入社区官方微信群
社区微信群
在进行Webapp开发的过程中遇到了这样的问题——在chrome上模拟很完美的页面,在移动端就变了样子,罪魁祸首就是不安分的小键盘~
我们先看看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
中的组件(是滴,我用了vue)。
这个解决方案就是直接加上属性:editable="false"
(这里使用了v-bind
的缩写)
<el-date-picker v-model="startDate" type="date" placeholder="预测开始日期" :editable="false">
这一点在官方文档里看得到
虽然我用过的UI库不多,但是大部分都会考虑到这一点,并在文档里说明。与其想无头苍蝇一样到处乱找,不如先仔细看看文档里有没有写到~~
如果觉得我的文章对您有用,请随意打赏。你的支持将鼓励我继续创作!