uni-app ios微信小程序多个输入框切换时输入框焦点概率获取失败问题

发布于 1周前 作者 songsunli 来自 Uni-App

uni-app ios微信小程序多个输入框切换时输入框焦点概率获取失败问题

操作步骤：

预期结果：

  • ios手机，从一个输入框，点击切换到另一个输入框时，另一个输入框应该能直接获取焦点，而不是需要再去点第二次（如微信小程序自己的官方示例）

实际结果：

  • 概率能切换，大概率失败。

bug描述：

  • 微信小程序同一个页面有多个输入框，在点击切换时，ios手机大概率无法获取焦点，需要二次进行点击输入框获取焦点。很影响交互体验。


| 项目创建方式 | 开发环境 | 版本号 |
|--------------|----------|--------|
| HBuilderX    | Windows  | 4.41   |
|              | Windows 10 专业版 |        |
| 第三方开发者工具 |          | 1.06.2312061 |
| 基础库       |          | 3.3.3  |

Harmonyos Next教程
3 回复

复现视频附件


期间尝试使用input的always-embed属性解决此问题，加了的确有缓解，但是增加always-embed属性后，输入框的光标位置在ios微信小程序中，每次获取焦点都在内容的开始位置，而不是末尾，更加影响使用，所有放弃了。

在uni-app开发中，遇到iOS微信小程序中多个输入框（input）切换时焦点获取失败的问题，通常是由于iOS系统的键盘管理策略与uni-app或微信小程序的框架实现之间存在一些兼容性问题。以下是一个可能的解决方案，通过监听输入框的聚焦（focus）和失焦（blur）事件，手动控制输入框的焦点状态，以确保焦点能够正确切换。

解决方案代码示例

  1. 页面结构： 在页面的wxml文件中，定义多个输入框。

    <view>
    <input type="text" placeholder="Input 1" @focus="handleFocus(1)" @blur="handleBlur(1)" />
    <input type="text" placeholder="Input 2" @focus="handleFocus(2)" @blur="handleBlur(2)" />
    <input type="text" placeholder="Input 3" @focus="handleFocus(3)" @blur="handleBlur(3)" />
</view>

  2. 逻辑处理： 在页面的js文件中，定义focus和blur事件的处理函数。

    export default {
    data() {
        return {
            currentFocus: null, // 当前聚焦的输入框编号
        };
    },
    methods: {
        handleFocus(index) {
            if (this.currentFocus !== index) {
                this.currentFocus = index;
                // 尝试手动聚焦
                this.$nextTick(() => {
                    const input = this.$refs[`input${index}`][0];
                    if (input) {
                        input.focus();
                    }
                });
            }
        },
        handleBlur(index) {
            this.currentFocus = null;
        },
    },
};

    注意：在uni-app中，直接通过this.$refs访问DOM元素可能不总是有效，特别是当使用组件或条件渲染时。如果this.$refs无法正确获取到元素，可以考虑使用this.selectComponent或者其他方式获取元素。

  3. 优化： 如果上述方法在某些情况下仍然无法解决问题，可以尝试使用定时器延迟聚焦操作，或者监听页面或组件的mounted、updated等生命周期钩子，确保DOM元素已经正确渲染后再进行聚焦操作。

    handleFocus(index) {
    if (this.currentFocus !== index) {
        this.currentFocus = index;
        setTimeout(() => {
            const input = this.$refs[`input${index}`][0];
            if (input) {
                input.focus();
            }
        }, 50); // 延迟50ms后尝试聚焦
    }
}

通过上述方法，可以在一定程度上解决iOS微信小程序中多个输入框切换时焦点获取失败的问题。如果问题依然存在，建议查阅uni-app和微信小程序的官方文档，或者向官方社区反馈此问题。

回到顶部