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

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

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

html:

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

js：

var vm = new Vue({
    el: "#app",
    data: {
        userName: '',
    },
    methods: {
        onBlur() {
            window.scrollTo(0,0)
        }
    }
})

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

html：

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

js：

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);
                    }
                }
            }
        }
    }
})

最后编辑于：2020.07.28 09:51:13