移动端软键盘收起监听
watchKeybord() { let me = this let oriWinHeight = window.innerHeight window.onresize = function() { me.isKeybordAvail = true let newHeight = window.innerHeight // 阀值大于140判断为键盘收起 if (newHeight - oriWinHeight > 140) { me.oprNum('input') } oriWinHeight = newHeight } }其中的me.isKeybordAvail = true,用来标注该浏览器环境下可以使用resize进行监听;另140是一个预估值的阀值,用来排除其他的resize操作。仅resize的高度差大于140时,才被识别为软键盘交互,否则不是。如浏览器的工具栏、搜索栏的隐藏,window的窗口页会有一个较小的变化。
setTimeout(function() { // 判断是否可用resize监听 if (me.isKeybordAvail) { return } if (!newValue) { me.oprNum('input') } }, 0)其中的isKeybordAvail,是为了判断是否可以通过监听resize处理键盘收起,如果是,则不处理blur。此处使用了setTimeout(function(){}, 0),它的作用是,将失焦操作延迟到下一个事件循环当中,确保resize事件已经触发,isKeybordAvail已经是正确的值。 总结,如表中,浏览器表现为四种不同的情况,将有不同的处理: 浏览器类型1:通过resize事件触发; 浏览器类型2:通过resize事件触发; 浏览器类型3:通过blur事件触发; 浏览器类型4:通过延迟的blur事件触发。[并非真正的键盘收起] 如上,通过兼容使用resize和blur的方法,实现键盘收起的监听。 优质内容筛选与推荐>>