H5页面ios键盘遮挡input问题

完美方案

// 解决输入法被激活时 底部输入框被遮住问题
<textarea type="text" value=""  ref="textarea"  v-model="newMsg"  v-on:focus="focusIpt" v-on:blur="blurIpt"  rows="1" />
data(){
  return{
     timer:null
 }
}
methods: {
   focusIpt() { // 解决输入框被激活时被键盘遮住问题
      this.timer = setInterval(function() {
          document.body.scrollTop = document.body.scrollHeight
       }, 100)
   },
   blurIpt() {
       clearInterval(this.timer)
   }
}，
updated(){
       let pannel = this.$refs.textarea;
	//监听输入框，动态增加输入框高度
       pannel.style.height='auto';  
       pannel.style.height = pannel.scrollHeight + 'px';  
}

注意，滑动页面时要 clearInterval(this.timer)

-------------------------------------------------------------------------------------------------------------------------------

最初的做法，用div代替textarea，既没有v-on:focus,也没有v-on:blur，不推荐用div代替textarea,上面已经完美解决input框被挡住问题，也解决textarea自适应高度问题

参考很多资料，目前测试有效，不完全好用，但是解决遮挡问题的方法

<div class="div-textarea" v-model="newMsg" ref="textarea" tabindex="0"  

contenteditable="true"></div>

methods:{
myFocus(){
     let pannel = this.$refs.textarea;
//     pannel.focus();
       console.log("focus")
       setTimeout(function(){
         pannel.scrollIntoView(true);
         pannel.scrollIntoViewIfNeeded();
          document.body.scrollTop = document.body.scrollHeight;
       },100);
//     setInterval( () => {
//     document.body.scrollTop = document.body.scrollHeight;
//     },300)
  }
},
updated(){
     this.myFocus()
}

参考 http://blog.csdn.net/u010884123/article/details/77143228