ios 输入法覆盖输入框,利用focus事件触发，利用滚动条底部位置定位

经过自己测试：

ios下不能监听resize事件，但是dom元素可以相应focus事件。

利用focus事件触发：

<textarea @focus="handleResize" class="weui-textarea" rows="1" v-model.trim= "commentInput" placeholder="添加评论" />

方法一：

滑动到底部，可以将输入框往上提升显示出来。

handleResize: function () {  // var self = this  setTimeout(function () {    // document.body.scrollTop = (parseInt(document.documentElement.clientHeight) - 50)    // window.scrollTo(0, document.body.scrollTop)    document.body.scrollTop = (parseInt(document.body.scrollHeight) - 50)    window.scrollTo(0, document.body.scrollTop)  }, 400)},

 

方法二：

nextTick渲染出来之后，再去延迟处理滚动到可视区域。

handleResize: function () {  this.$nextTick(function () {    setTimeout(function () {      document.getElementById('applyNote').scrollIntoView(true)    }, 400)  })},

 

方法三：

下面是转自其他人的记录，没有测试成功过，未知是否有效。

 https://www.cnblogs.com/pengshengguang/p/7765079.html

<ul id="applyNote" v-else>  <li style="float:left; width:80%">    <div class="inputComment">      <textarea class="weui-textarea" @focus="handleResize" rows="1" v-model.trim= "commentInput" placeholder="添加评论" />    </div>  </li>  <li style="position:absolute;width:20%; right:0; bottom:0; padding-right:20px; padding-bottom:10px;" >    <a @click="commentSubmitClick(curCommentId, curToName)"><img  v-bind:src="plSubmitIcon" /></a>  </li></ul>

docmHeight: document.documentElement.clientHeight,showHeight: document.documentElement.clientHeight,

handleResize: function () {  window.screenHeight = document.body.clientHeight  this.showHeight = window.screenHeight},

inputType () {  if (!this.timer) {    this.timer = true    let that = this    setTimeout(() => {      if (that.docmHeight > that.showHeight) {        that.inputfile = false        if (document.activeElement.className === 'weui-textarea') {          document.getElementById('applyNote').scrollIntoViewIfNeeded() // 输入框的id为applyNote，class为weui-textarea        }      } else if (that.docmHeight <= that.showHeight) {        that.inputfile = true      }      that.timer = false    }, 20)  }}

watch: {
    showHeight: 'inputType',
}

 

方法四：

https://www.zhihu.com/question/32746176