出现focus无效原因:
ios的UIWebView 默认的KeyboardDisplayRequiresUserAction为false,设置为true就行,WKWebView 不支持这个属性,如果要从原生入手解决,请参考https://stackoverflow.com/questions/32407185/wkwebview-cant-open-keyboard-for-input-field
解决思路:
从无效原因可以看出,是键盘需要用户触发才能弹出,这导致了autofocus或者element.focus()无效,所以,在键盘弹出的情况下再去focus,或者跳转到带有autofocus的页面也就可以正常focus了
解决方法:
通常的场景是,我们点击页面某个元素 => 逻辑交互 => 希望focus元素、或者跳转到有aotufocus的页面。再这里有个大前提,就是要有点击页面行为。
第一步:在点击页面时候,给一个占位的input进行focus,调起键盘;
第二步:逻辑交互、异步操作、settimeout延时处理等,在处理完成再focus到目标input,或者跳转到autofocus的页面,就可以正常focus了。
划重点
只要是点击事件的回调就具备focus到input的能力,所以无论是点击生成input再focus到这个input、还是跳转到autofocus的页面,先利用点击focus到一个占位input调起键盘,在键盘存在的情况下调用element.focus()或者跳转到有autofocus的页面就都可以正常focus了。
占位input:
.clip{
position: absolute;
clip: rect(0 0 0 0);
}
<input ref="tempFocus" class="clip">
<div @click="gotoCommentClick">快来留言吧!</div>
gotoCommentClick() {
this.afterLogin().then(_ => {
this.$refs.tempFocus.focus();
this.$router.push(this.$route.path + '/comment');
})
},
comment.vue
mounted() {
this.$refs.editor.focus();
}
UC浏览器上注意事项:
uc浏览器,如果吊起键盘focus的input和延时再去focus的input不是同一个input,则第二个input无法正常focus,会出现键盘弹起又收起。处理方式是第二focus的input由第一个input复制插入到页面就可以正常了。