React 前端导航
首页  /  博客

苹果手机中钉钉小程序点击input以外的元素时,input未失去焦点同时键盘也未关闭

正常情况下,输入框在有焦点时,点击输入框以外的地方,输入框会失焦,并且关闭键盘,但是最近在 IOS 中发现个高概率问题(非必现),点击其他绑定了事件的元素时,输入框的焦点并未消失而且键盘也没有关闭导致异常,比如说点击输入框输入证件号后,点击打开证件类型下拉框,下拉框弹出后,输入框焦点未消失且键盘未关闭,导致下拉框内容被键盘遮挡,这是不符合预期效果的,示意图效果如下:
小程序

解决思路

在点击其他绑定了事件的元素时,我们可以手动让 input 元素失焦(blur)一次,React 关键代码示例如下:

    // 声明ref 来获取inpu实例
     const inputRef = useRef();
    
    // 绑定ref
     <Input ref={titleInputRef} placeholder='请输入活动标题' />

    // 其他绑定了事件的元素
    <OtherComponent onClick={
        inputRef.current.blur();
        dd.hideKeyboard(); //这个是钉钉主动关闭键盘的API
        //    原本的点击事件逻辑这里省略了
    } />

正常情况下,我们只需要 blur 一次就可以让 input 失去焦点,但是在 IOS 中去做尝试时,发现仅仅blur的话 input 依然偶尔会出现没有失去焦点,键盘依然未收起 ,只是问题出现的频率较之前少了一些,因此我们再尝试手动去调用钉钉的 API 来关闭,也就是加了 dd.hideKeyboard() 这段代码来手动关闭键盘,这样测试了一下基本就可以规避 input 没有失去焦点的问题了。

**注意:**上述的两个操作 blur 和 hideKeyboard 只单独写一个是不行的,至少我这里不行,有兴趣的各位可以自行尝试,本文提供的方法仅供参考书

#钉钉#小程序#移动端

相关推荐

钉钉小程序实现水印

与PC端实现水印的思路基本一致,都是借助 canvas 生成水印图片作为背景图,全凭覆盖页面即可。

在线工具

JSON格式化MD5时间戳转换typescript 在线运行