CODEWITHSUNDEEP
javascriptreactjsmobileandroid-softkeyboard
Kristi Jorgji
Kristi Jorgji

Reputation: 1739

How to prevent mobile keyboard from closing when I click button in website?

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:

component.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 ?

Upvotes: 7

Views: 4994

Answers (3)

Mael Abgrall
Mael Abgrall

Reputation: 475

This question ranked high on google, and here is how I managed to do this (with the composition 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

Upvotes: 2

acenturyandabit
acenturyandabit

Reputation: 1418

You can try the 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();
}

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.com/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.org/TR/virtual-keyboard/#webidl-65390189

Upvotes: -1

Julo
Julo

Reputation: 59

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.

Upvotes: 4

Related Questions