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

终端特点：
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