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