uni-app ios input confirm事件隐藏软键盘后，再点击页面中除input元素，会再次触发input聚焦

uni-app ios input confirm事件隐藏软键盘后，再点击页面中除input元素，会再次触发input聚焦

示例代码：

<template>  
    <view class="content">  
        <view>  
            <input style="background-color: pink;" auto-blur @confirm="testInputConfirm()" @blur="testBlur()" @focus="testFocus()" />  
        </view>  
    </view>  
</template>  

<script>  
    export default {  
        data() {  
            return {  
                title: 'Hello'  
            }  
        },  
        onLoad() {  

        },  
        methods: {  
            testFocus() {  

                console.log('focus');  

            },  

            testBlur() {  

                console.log('blur');  

                uni.hideKeyboard();  

            },  

            testInputConfirm() {  

                console.log('confirm');  

                uni.hideKeyboard();  

            }  
        }  
    }  
</script>  

<style>  
    .content {  
        display: flex;  
        flex-direction: column;  
        align-items: center;  
        justify-content: center;  
    }  

    .logo {  
        height: 200rpx;  
        width: 200rpx;  
        margin-top: 200rpx;  
        margin-left: auto;  
        margin-right: auto;  
        margin-bottom: 50rpx;  
    }  

    .text-area {  
        display: flex;  
        justify-content: center;  
    }  

    .title {  
        font-size: 36rpx;  
        color: #8f8f94;  
    }  
</style>

操作步骤：

在input中监听blur confirm focus 事件并打印,在confirm中添加hideKeyboard事件隐藏软键盘，input设置auto-blur属性，当输入完文字触发confirm事件时，此时input失去焦点，但点击页面任意位置，除input，会让input聚焦

预期结果：

不触发任何事件

实际结果：

点击页面其它位置使input重新聚焦

bug描述：

在input中监听blur confirm focus 事件并打印,在confirm中添加hideKeyboard事件隐藏软键盘，input设置auto-blur属性，当输入完文字触发confirm事件时，此时input失去焦点，但点击页面任意位置，除input，会触发input的聚焦事件，目前仅ios会触发,打印日志如下图所示

示例图片

示例图片


更多关于uni-app ios input confirm事件隐藏软键盘后，再点击页面中除input元素，会再次触发input聚焦的实战教程也可以访问 https://www.itying.com/category-93-b0.html

3 回复

在最新版alpha上也试过了，确实有问题，项目是新建的，demo就是上面的代码

更多关于uni-app ios input confirm事件隐藏软键盘后，再点击页面中除input元素，会再次触发input聚焦的实战教程也可以访问 https://www.itying.com/category-93-b0.html


而且在我的手机上，点击软键盘右下角按钮后并不能实现软键盘的自动收起,confirm-hold默认为false应该就是点击后收起吧

这是一个iOS平台特有的问题，主要是由于uni.hideKeyboard()和auto-blur属性在iOS上的交互行为导致的。

问题原因分析：

  1. iOS的软键盘隐藏和焦点处理机制与Android不同
  2. 使用uni.hideKeyboard()后，iOS系统仍保留了一个"虚拟焦点"
  3. 点击页面其他位置时，系统会尝试将焦点重新给到之前获得焦点的input

解决方案：

  1. 移除auto-blur属性，改为手动控制
  2. 在confirm事件中先调用blur()再隐藏键盘

修改后的代码建议：

testInputConfirm() {
    console.log('confirm');
    this.$refs.inputRef.blur(); // 先手动触发blur
    setTimeout(() => {
        uni.hideKeyboard();
    }, 50);
}
回到顶部