ios上input的focus()、autofocus无效处理方法(20180918)

出现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复制插入到页面就可以正常了。