uni-app ios使用讯飞输入法时输入框被遮盖

uni-app ios使用讯飞输入法时输入框被遮盖

示例代码：

// vue  
.send-tools  
    textarea.text-size(  
            v-model='content'  
            auto-height  
            :maxlength='200'  
            clearable  
            placeholder='请输入聊天内容'  
            confirm-type='send'  
            confirm-hold  
            :show-confirm-bar='false'  
            @focus='iFocus'  
            @linechange='handleLineChange'  
            @confirm='handleConfirm'  
          )  

// css  
.send-tools-box {  
    position: fixed;  
    bottom: 0;  
    z-index: 9;  
    width: 100%;  
    background-color: #f6f6f6;  
  }

操作步骤：

点击输入框聚焦后，切换到讯飞输入法，再次聚焦后即可复现

预期结果：

跟原生键盘一样，输入框浮在键盘上方

实际结果：

输入框被键盘遮盖

bug描述：

使用讯飞输入法时，输入框被输入面板遮盖，原生输入法和搜狗输入法正常。

开发环境 版本号 项目创建方式
Mac Ventura 13.6.6 CLI

image image

5-10.mp4_.zip


更多关于uni-app ios使用讯飞输入法时输入框被遮盖的实战教程也可以访问 https://www.itying.com/category-93-b0.html

1 回复

更多关于uni-app ios使用讯飞输入法时输入框被遮盖的实战教程也可以访问 https://www.itying.com/category-93-b0.html


在 uni-app 开发中，当在 iOS 设备上使用讯飞输入法时，输入框被遮盖的问题通常是由于输入法键盘弹出时，页面布局没有正确调整导致的。以下是一些可能的解决方案：

1. 使用 uni.onKeyboardHeightChange 监听键盘高度变化

uni-app 提供了 uni.onKeyboardHeightChange 方法，可以用来监听键盘高度的变化。你可以在键盘高度变化时，调整输入框的位置。

uni.onKeyboardHeightChange(res => {
  const keyboardHeight = res.height;
  // 根据键盘高度调整输入框位置
  // 例如：将输入框向上移动 keyboardHeight 像素
});

2. 使用 scroll-into-view 属性

在 scroll-view 组件中，可以使用 scroll-into-view 属性，将输入框滚动到可视区域。

<scroll-view scroll-y="true" :scroll-into-view="scrollIntoViewId">
  <input @focus="handleFocus" />
</scroll-view>

export default {
  data() {
    return {
      scrollIntoViewId: ''
    };
  },
  methods: {
    handleFocus() {
      this.scrollIntoViewId = 'inputId'; // 将 inputId 替换为你的输入框的 id
    }
  }
};

3. 使用 position: fixed 或 position: absolute

将输入框的样式设置为 position: fixed 或 position: absolute，并动态调整其位置，以避免被键盘遮盖。

<input :style="inputStyle" />

export default {
  data() {
    return {
      keyboardHeight: 0,
      inputStyle: {
        position: 'fixed',
        bottom: '0'
      }
    };
  },
  mounted() {
    uni.onKeyboardHeightChange(res => {
      this.keyboardHeight = res.height;
      this.inputStyle.bottom = `${this.keyboardHeight}px`;
    });
  }
};

4. 使用 uni.pageScrollTo 方法

你可以在输入框获取焦点时，使用 uni.pageScrollTo 方法将页面滚动到适当的位置。

methods: {
  handleFocus() {
    uni.pageScrollTo({
      scrollTop: 100, // 根据实际情况调整滚动距离
      duration: 300
    });
  }
}

5. 检查 manifest.json 配置

确保在 manifest.json 中正确配置了 app-plus 的 softinputMode，以控制键盘弹出时的页面布局。

{
  "app-plus": {
    "softinputMode": "adjustResize"
  }
}

6. 使用 input 组件的 adjust-position 属性

在 input 组件中，可以使用 adjust-position 属性，使其在键盘弹出时自动调整位置。

<input adjust-position="true" />
回到顶部