终端特点：

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);
}

我的使用场景

<input type="text" name="order_sn"  data-index="{{index}}" value="{{order_sn}}" id="order_sn"  class="fn-input  js-input-user" placeholder="生产订单号" autocomplete="off" onfocus="fn().searchEvent('order_sn')">

searchEvent(id){
    //执行搜索操作
    console.log("searchEvent")
    $(`#${id}`).attr("readonly","true")
    setTimeout(() => {
        $(`#${id}`).removeAttr("readonly")
    }, 200);


}

链接：https://blog.csdn.net/mollerlala/article/details/109256230