手机端页面,隐藏虚拟键盘

Posted 2020-09-28

原生js中没有方法来控制手机虚拟键盘的隐藏与显示,当输入框得到焦点时会自动弹出虚拟键盘,很多时候页面已经滚动到别处了,键盘应该隐藏了,可键盘还是没收回,这时候可用个变通的办法了隐藏键盘.

首先在页面增加一个input元素:

<input type="text" class="input-null" id="input-null" readonly>

css如下

.input_null {
    display: block;
    width: 100px;
    height: 45px;
    position: fixed;
    right:0;
    top:0;
    background: rgba(0,0,0,0);
}

js触发一下这个input的得到焦点事件即可(jQuery的写法):

$("#input-null").trigger("focus");