欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  移动技术

2020-10-24-选中input框,隐藏输入法键盘

程序员文章站 2022-06-19 16:20:36
终端特点:1、类似诺基亚的机皇款,本身带硬件键盘;2、屏幕小,输入法的键盘展示会遮挡屏幕,隐藏使用体验。需求:1、进入页面,输入框自动聚焦;2、隐藏输入法键盘,用设备自带的键盘type。网上两种方法:1、加readonly,此方法不能type,只能看,不适合我的业务场景。2、此方法,我这边测试,在手机和终端设备上,虽然不弹出键盘,但是既不能type,也没有焦点。$("#box").focus(funct...

终端特点:
1、类似诺基亚的机皇款,本身带硬件键盘;
2、屏幕小,输入法的键盘展示会遮挡屏幕,隐藏使用体验。

需求:
1、进入页面,输入框自动聚焦;
2、隐藏输入法键盘,用设备自带的键盘type。

网上两种方法:
1、加readonly,此方法不能type,只能看,不适合我的业务场景。

<input type="text" readonly />

2、此方法,我这边测试,在手机和终端设备上,虽然不弹出键盘,但是既不能type,也没有焦点。

$("#box").focus(function(){
    document.activeElement.blur();
})

附上公司大佬给的方法:
这是react+mobx的项目,用readOnly属性和onFocus事件就解决了。键盘隐藏了,还有焦点光标,并且能type。

<input
    autoFocus
    readOnly={readonly}
    placeholder="请输入"
    value={price}
    onFocus={(event: React.FocusEvent<HTMLInputElement>) => onFocus()}
    onChange={(event: React.ChangeEvent<HTMLInputElement>) => setPrice(event.target.value)}
/>
@action onFocus = () => {
    this.readonly = true;
    setTimeout(() => {
      this.readonly = false;
    }, 200);
}







 

本文地址:https://blog.csdn.net/mollerlala/article/details/109256230