how do i caputure key press event on mobile devices with react.js

Question

My app is a React.js web app running on Next.js framework.

I am trying to solve this issue. I have a function that listens for a key event to be triggered. The function works well while the webapp is opened on a computer, but when it is opened on a mobile device does not capture the event. I am trying to capture the "Spacebar" press or release, this is the event that updated my tag array and clears the input.

I am using an android phone to test the app and the console.log on the phone when I use e.which or e.key with jQuery is undefined.

If e.key and e.which is used with normal react.js I get the same code dose not matter which key I press on the phones keyboard: 229.

This issue is not occurring on IOS phones!!!!!!

It could be because of this specific Phone model: "One Plus Nord n10g"?

I have tried also this: keyup, keydown and keypress events not working on mobile. the recommended answer

Here is my function:

  const handleTagKeyPress = (e) => {
    // TODO: dose not work on mobile
    if (
      e.type === "touched" ||
      keycode(e) === "space" ||
      e.key === " " ||
      e.key === "Spacebar" ||
      e.key === "Space" ||
      (e.type === "keydown" && e.code === "Space") ||
      e.which === 32 ||
      e.charCode === 32 ||
      e.keyCode === 32
    ) {
      e.preventDefault();
      if (allergies !== "" && !allergiesArray.includes(allergies))
        setAllergiesArray([...allergiesArray, allergies]);
      setAllergies("");
    }
  };

I am using it like this in the component:

onKeyDown={handleTagKeyPress}
onKeyDownCapture={handleTagKeyPress}
onKeyUp={handleTagKeyPress}
onKeyUpCapture={handleTagKeyPress}

I have tried also this:

  const handleTagKeyPress = (e) => {
    console.log("dasd");
    const key2 = e.key;
    $(document).on("keydown", (e) => {
      if (e.key === " " || e.key === "Spacebar" || e.key === "Space") {
        e.preventDefault();
        if (allergies !== "" && !allergiesArray.includes(allergies))
          setAllergiesArray([...allergiesArray, allergies]);
        setAllergies("");
      }
    });
  };

and this:

  const handleTagKeyPress = (e) => {
    console.log("dasd");
    console.log(key2);
    const key2 = e.key;
    $(document).on("keydown", (e) => {
      if (e.which === " " || e.which === "Spacebar" || e.which === "Space") {
        e.preventDefault();
        if (allergies !== "" && !allergiesArray.includes(allergies))
          setAllergiesArray([...allergiesArray, allergies]);
        setAllergies("");
      }
    });
  };

and this is the input (it was A TextField from MUI5, there is no diff in the result):

        <input
                id="outlined-required"
                label="Allergies"
              
                value={allergies}
                onChange={(e) => {
                  setAllergies(e.target.value);
                }}
                onKeyDown={handleTagKeyPress}
                onTouchEndCapture={handleTagKeyPress}
                onTouchStart={handleTagKeyPress}
                onKeyDownCapture={handleTagKeyPress}
                onKeyUp={handleTagKeyPress}
                onKeyUpCapture={handleTagKeyPress}
              />

how do i caputure key press event on mobile devices with react.js

0 Answers0