vue项目在ios移动端多个输入框软键盘关闭留白情况

原创于 2019-10-31 18:45:23 发布

· 506 阅读

0 ·

版权

文章标签：

#vue项目在ios移动端多个输入框软键盘关闭留白情况

vue.js 同时被 2 个专栏收录

17 篇文章

订阅专栏

JavaScript

9 篇文章

订阅专栏

本文介绍了一种解决iOS设备上键盘弹出导致页面滚动偏移的方法。通过监听input元素的focusin和focusout事件，使用setTimeout实现页面滚动位置的还原，确保了良好的用户体验。

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

一个div中有多个input

<div @focusout = "inputBlur" @focusin = "inputFocus">
    <input type="number >
    <input type="number >
    <input type="number >
 </div>

添加如下方法

inputBlur(e) {
       // 首先，判断触发事件的目标元素是否是input输入框，我们只关注输入框的行为。
 if (e && e.target && e.target.tagName && e.target.tagName.toLowerCase() === 'input') {
     // 输入框失去焦点，要把IOS键盘推出页面的滚动部分还原。即将页面滚动到视窗顶部对齐
     this.timer = setTimeout(() => {
            window.scrollTo(0,0);
           }, 0)
          }
      },
inputFocus(e) {
  // 如果focus，则移除上一个输入框的timer
    if (e && e.target && e.target.tagName && e.target.tagName.toLowerCase() === 'input') {
        clearTimeout(this.timer);
       }
 }