完美解决Vue项目在H5微信开发iOS真机上input和select调起软键盘后不回弹

大唐锦绣

于 2019-07-07 17:39:28 发布

阅读量2.4k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： # Vue 文章标签： vue ios input 软键盘后不回弹

本文链接：https://blog.youkuaiyun.com/qq_27295403/article/details/95008879

Vue 专栏收录该内容

17 篇文章

订阅专栏

本文介绍了一个使用Vue实现的简单示例，展示了如何通过input和select元素结合v-model指令，使输入框与下拉框选择联动，并在失去焦点时调整页面滚动位置。代码示例直接展示了HTML结构和Vue组件的计算属性与方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

直接上代码，简单粗暴

<input class="item-input" type="text" v-model="name" placeholder="请输入你的姓名" @blur="blurIn"/>
<select v-model="order.award_id" @blur="blurIn">
      <option v-for="item in awards" :value="item.id" :key="item.key">
        {{ item.title }}
      </option>
</select>

export default {
    computed: {
        scrollHeight () {
            return document.documentElement.scrollTop || document.body.scrollTop || 0
        }
    }
    methods: {
        blurIn () {
            window.scrollTo(0, Math.max(this.scrollHeight - 1, 0))
        }
    }
}