javascript - How to prevent mobile keyboard from closing when I click button in website? - Stack Overflow

admin管理员组

文章数量:1317915

I have a simple chat view, and one button that when clicked sends the value of input field to api (send message)

After I insert text via mobile virtual keyboard, and click "Send" Button the keyboard closes.

I want to prevent that closing, so user can send more messages and only when they click outside keyboard it finally closes

My react code is like this:

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

I tried in the button event handler to preventDefault() but doesn't work. I also tried event.nativeEvent.stopPropagation(); event.stopPropagation() still no success. I don't understand why the keyboard closes (maybe due to losing focus but I want to keep it open) How to stop mobile (android) virtual keyboard from closing, when I click this button ?

I have a simple chat view, and one button that when clicked sends the value of input field to api (send message)

After I insert text via mobile virtual keyboard, and click "Send" Button the keyboard closes.

I want to prevent that closing, so user can send more messages and only when they click outside keyboard it finally closes

My react code is like this:

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

I tried in the button event handler to preventDefault() but doesn't work. I also tried event.nativeEvent.stopPropagation(); event.stopPropagation() still no success. I don't understand why the keyboard closes (maybe due to losing focus but I want to keep it open) How to stop mobile (android) virtual keyboard from closing, when I click this button ?

• javascript
• reactjs
• mobile
• android-softkeyboard

Share Improve this question Follow asked Mar 17, 2022 at 13:20 Kristi JorgjiKristi Jorgji 1,73944 gold badges2828 silver badges6363 bronze badges 3

• 1 Maybe this codepen can help you. – Samball Commented Mar 17, 2022 at 13:27
• Interesting solution @Samball, works on my mobile device – GetSet Commented Mar 17, 2022 at 13:30
• I tried after posting here also doing ` submitMessageBtn.current!.focus()` and seem to work on Android, but issue is mobile keyboard is covering bottom of chat list. Need to padd dynamically based on size of keyboard – Kristi Jorgji Commented Mar 17, 2022 at 13:35

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 4

I had the same Problem with a Button in Vue.js and .preventDefault() on the click-event didn't help. The solution was adding an EventListener on the Button for the "touchend" Event.

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

I just tested it on iOS, but I guess Android will work too.

This question ranked high on google, and here is how I managed to do this (with the position api)

you will need first to get a ref to your textarea (or input), and when you are firing the click event, call this ref value and focus on it:

<template>
  <textarea
    ref="input"
    placeholder="Message..."
  />
  <button @click="sendMessage">Send</button>
</template>

<script lang="ts" setup>
import { reactive, ref } from "vue";

// if you are using JS, write only const input = ref(null);
const input = ref<null | { focus: () => null }>(null);

async function sendMessage() {
  // keep focus back on the input
  input.value?.focus();
  // input.value.focus(); in JS

  // then send the message
  // ...
}
</script>

this was tested only on android though

You can try the VirtualKeyboard API: https://developer.chrome./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();
}

Note this only works in a secure context i.e. localhost or https site. If you need to do testing and you want to host from your local device but test on your phone, use port forwarding as described here: https://developer.chrome./docs/devtools/remote-debugging/local-server/

Also your browser MUST be focused on an element which is editable, as per the W3C spec. https://www.w3/TR/virtual-keyboard/#webidl-65390189

本文标签： javascriptHow to prevent mobile keyboard from closing when I click button in websiteStack Overflow