vue iphone填写表单时，键盘收起页面不复位的完美解决方案

相信大家在用vue做H5页面时都遇到过在iphone上键盘拉起收回之后页面不复位的问题，下面给出完美解决方案：

1、如果页面上只有一个输入框，用下面的方法即可：

html:

<input v-model="userName" @blur="onBlur" />

js：

<script type="text/javascript">
    var vm = new Vue({
        el: "#app",
        data: {
            userName: '',
        },
        methods: {
            onBlur() {
                window.scrollTo(0,0)
            }
        }
    })
</script>

2、但是通常情况下，页面上往往有多个输入框，此时再用上面的那个方法，页面会有抖动（一耸一耸），因为我们再切换输入框的时候，其实是有两个动作：离开的输入框失焦、目标输入框获取焦点，因此此时我们需要采用下面的方法（这里需要采用onfocusout，因为onblur事件不支持冒泡）：

html：

<div  @focusout="onBlur" @focusin="onFocus" >
    <input v-model="userName" />
    <input v-model="userAge" />
    <input v-model="userTel"  />
</div>

js：

<script type="text/javascript">
    var vm = new Vue({
        el: "#app",
        data: {
            userName: '',
            userAge: '',
            userTel: '',
            blurTimer: null,
            inputArr: ['input', 'textarea'],
        },

        methods: {
            onBlur(e) {
                let UA = window.navigator.userAgent.toLowerCase();
                if (UA.indexOf('iphone') > -1) {
                    if (e && e.target && e.target.tagName) {
                        let targetTagName = e.target.tagName.toLowerCase();
                        // 首先，判断触发事件的目标元素是否是input, textarea输入框
                        if (this.inputArr.indexOf(targetTagName)>-1) {
                        // 输入框失去焦点，要把IOS键盘推出页面的滚动部分还原。即将页面滚动到视窗顶部对齐
                            this.blurTimer =setTimeout(() => {
                                window.scrollTo(0,0);
                            }, 0)
                        }
                    }
                }
            },
            onFocus(e) {
                let UA = window.navigator.userAgent.toLowerCase();
                if (UA.indexOf('iphone') > -1) {
                    // 如果focus，则移除上一个输入框的timer
                    if (e && e.target && e.target.tagName && e.target.tagName) {
                        let targetTagName = e.target.tagName.toLowerCase();
                        if (this.inputArr.indexOf(targetTagName)>-1) {
                            clearTimeout(this.blurTimer);
                        }
                    }
                }
             }
        }
    })
</script>