uni-app ios平台APP popup中的输入框input获取焦点之后位置不正确的问题

uni-app ios平台APP popup中的输入框input获取焦点之后位置不正确的问题

信息类别 详细信息
产品分类 uniapp/App
PC开发环境 Windows
PC版本号 Windows 11 家庭中文版
HBuilderX类型 正式
HBuilderX版本号 3.98
手机系统 iOS
手机版本号 iOS 11.0
手机厂商 苹果
手机机型 iphone11 pro max
页面类型 vue
vue版本 vue2
打包方式 云端
项目创建方式 HBuilderX

操作步骤：

点击按钮，弹出popup
点击popup中的input，获取焦点，input上调
点击完成，输入框失去焦点，90%可能性回到底部 10%可能性留在原位


### 预期结果：

点击按钮，弹出popup  
点击popup中的input，获取焦点，input上调  
点击完成，输入框失去焦点，100%可能性回到底部

实际结果：

点击按钮，弹出popup
点击popup中的input，获取焦点，input上调
点击完成，输入框失去焦点，90%可能性回到底部 10%可能性留在原位


### bug描述：

在uni-popup中有一个输入框 input ，固定定位在底部。 当弹出popup并点击输入框时，会正常出现软键盘，此时输入框正常被遮挡，通过监听onkeyboardheightchange事件获取到软键盘高度来调整输入框定位，可以将输入框正常向上调整位置。 但是当输入完毕点击确定时、或者不再输入失去焦点时，软键盘消失，但是输入框还停留在原来的位置。  
最关键的是，这个问题并不是百分之百出现，而是大多数情况下会正常回归底部，只有极少数情况下才会停留在原位。


更多关于uni-app ios平台APP popup中的输入框input获取焦点之后位置不正确的问题的实战教程也可以访问 https://www.itying.com/category-93-b0.html

1 回复

更多关于uni-app ios平台APP popup中的输入框input获取焦点之后位置不正确的问题的实战教程也可以访问 https://www.itying.com/category-93-b0.html


在 uni-app 开发中，iOS 平台的 popup 组件中的 input 输入框在获取焦点后位置不正确的问题，通常是由于 iOS 的键盘弹出机制和页面布局的调整导致的。以下是几种常见的解决方案：

1. 使用 scroll-view 包裹内容

将 popup 中的内容包裹在 scroll-view 中，并设置 scroll-into-view 属性，使输入框在获取焦点时自动滚动到可视区域。

<template>
  <view>
    <button @click="showPopup">显示弹窗</button>
    <uni-popup ref="popup">
      <scroll-view scroll-y="true" :scroll-into-view="scrollIntoId">
        <view>
          <input v-model="inputValue" @focus="handleFocus" id="input1" />
          <!-- 其他内容 -->
        </view>
      </scroll-view>
    </uni-popup>
  </view>
</template>

<script>
export default {
  data() {
    return {
      inputValue: "",
      scrollIntoId: "",
    };
  },
  methods: {
    showPopup() {
      this.$refs.popup.open();
    },
    handleFocus() {
      this.scrollIntoId = "input1"; // 使输入框滚动到可视区域
    },
  },
};
</script>

2. 使用 uni.onKeyboardHeightChange 监听键盘高度

在 iOS 中，键盘弹起时页面会被挤压，导致布局错乱。可以通过监听键盘高度变化，动态调整页面布局。

<template>
  <view>
    <button @click="showPopup">显示弹窗</button>
    <uni-popup ref="popup">
      <view :style="{ paddingBottom: keyboardHeight + 'px' }">
        <input v-model="inputValue" @focus="handleFocus" />
        <!-- 其他内容 -->
      </view>
    </uni-popup>
  </view>
</template>

<script>
export default {
  data() {
    return {
      inputValue: "",
      keyboardHeight: 0,
    };
  },
  methods: {
    showPopup() {
      this.$refs.popup.open();
    },
    handleFocus() {
      uni.onKeyboardHeightChange((res) => {
        this.keyboardHeight = res.height;
      });
    },
  },
};
</script>

3. 使用 position: fixed 固定弹窗布局

将 popup 的内容设置为 position: fixed，避免页面布局被键盘挤压。

<template>
  <view>
    <button @click="showPopup">显示弹窗</button>
    <uni-popup ref="popup">
      <view class="popup-content">
        <input v-model="inputValue" @focus="handleFocus" />
        <!-- 其他内容 -->
      </view>
    </uni-popup>
  </view>
</template>

<style scoped>
.popup-content {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #fff;
  padding: 20px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
</style>

<script>
export default {
  data() {
    return {
      inputValue: "",
    };
  },
  methods: {
    showPopup() {
      this.$refs.popup.open();
    },
    handleFocus() {
      // 处理输入框获取焦点的逻辑
    },
  },
};
</script>

4. 使用 uni-page-refresh 强制刷新页面

在某些情况下，可以通过强制刷新页面来解决布局问题。

<template>
  <view>
    <button @click="showPopup">显示弹窗</button>
    <uni-popup ref="popup">
      <input v-model="inputValue" @focus="handleFocus" />
      <!-- 其他内容 -->
    </uni-popup>
  </view>
</template>

<script>
export default {
  data() {
    return {
      inputValue: "",
    };
  },
  methods: {
    showPopup() {
      this.$refs.popup.open();
    },
    handleFocus() {
      uni.pageScrollTo({
        scrollTop: 0,
        duration: 0,
      });
    },
  },
};
</script>

5. 确保 input 在可视区域内

在 iOS 中，如果输入框位于屏幕底部，键盘弹起时可能会遮挡输入框。可以通过动态调整 input 的位置，确保其在可视区域内。

<template>
  <view>
    <button @click="showPopup">显示弹窗</button>
    <uni-popup ref="popup">
      <view :style="{ marginBottom: keyboardHeight + 'px' }">
        <input v-model="inputValue" @focus="handleFocus" />
        <!-- 其他内容 -->
      </view>
    </uni-popup>
  </view>
</template>

<script>
export default {
  data() {
    return {
      inputValue: "",
      keyboardHeight: 0,
    };
  },
  methods: {
    showPopup() {
      this.$refs.popup.open();
    },
    handleFocus() {
      uni.onKeyboardHeightChange((res) => {
        this.keyboardHeight = res.height;
      });
    },
  },
};
</script>
回到顶部