当我点击网站中的按钮时，如何防止手机键盘关闭？答案

【问题标题】：How to prevent mobile keyboard from closing when I click button in website?当我点击网站中的按钮时，如何防止手机键盘关闭？
【发布时间】：2022-11-10 18:45:27
【问题描述】：

我有一个简单的聊天视图，一个按钮在单击时将输入字段的值发送到 api（发送消息）

通过移动虚拟键盘插入文本后，单击“发送”按钮，键盘关闭。

我想阻止关闭，因此用户可以发送更多消息，并且只有当他们点击外部键盘时它才会最终关闭

我的反应代码是这样的：

组件.tsx

<span className="input-group-btn">
            <button
                 ref={submitMessageBtn}
                 className="btn"
                 onClick={React.useCallback((event) => {
                 event.nativeEvent.preventDefault();
                   sendMessage();
                 }, [])}
                 >
                      {i18n.sendMsgBtn}
                  </button>
                </span>


// somewhere down the function sendMessage
function sendMessage() {
        const messageContent = chatMessageInput.current!.value;
        chatMessageInput.current!.value = '';
        submitMessageBtn.current!.disabled = true;

        p.sendMessage(user.id, messageContent).catch((err) => {
            // not interesting for question
        });
    }

我在按钮事件处理程序中尝试了preventDefault()，但不起作用。我也试过event.nativeEvent.stopPropagation();event.stopPropagation()还是没有成功。我不明白为什么键盘会关闭（可能是因为失去焦点，但我想保持打开状态）当我单击此按钮时，如何阻止移动（android）虚拟键盘关闭？

【问题讨论】：

也许thiscodepen 可以帮助你。
有趣的解决方案@Samball，适用于我的移动设备
我在这里发帖后也尝试过 `submitMessageBtn.current!.focus()` 并且似乎可以在 Android 上运行，但问题是移动键盘覆盖了聊天列表的底部。需要根据键盘大小动态填充

标签： javascript reactjs mobile android-softkeyboard

【解决方案1】：

我在 Vue.js 中使用 Button 时遇到了同样的问题，而 click 事件上的 .preventDefault() 没有帮助。解决方案是在“touchend”事件的按钮上添加一个 EventListener。

mounted() {
this.guestName = "";

const btn = document.querySelector(".input-button");
if (btn){
  btn.addEventListener("touchend", (e)=>{
    e.preventDefault();
    //functions for the Button need to be called here
    this.addGuestClicked(this.guestName);
  })
}

我刚刚在 iOS 上进行了测试，但我想 Android 也可以。

【讨论】：

【解决方案2】：

你可以试试 VirtualKeyboard API：https://developer.chrome.com/docs/web-platform/virtual-keyboard/

if ('virtualKeyboard' in navigator) {
  // The VirtualKeyboard API is supported!
  navigator.virtualKeyboard.overlaysContent = true;
  navigator.virtualKeyboard.show();
  // When you want to hide it
  navigator.virtualKeyboard.hide();
}

【讨论】：