在 React 中聚焦並單擊輸入字段

Question

我試圖集中注意力，然后在 useRef 掛鈎的幫助下單擊輸入字段。 我想要實現的是在 IOS 和 ANDROID 的手機瀏覽器中打開輸入字段的鍵盤。不幸的是，它在我的情況下不起作用，我不確定為什么。 請注意，控制台日志顯示已單擊。 這是我的代碼：

import React, { useEffect, useRef } from "react";
import ReactDOM from "react-dom";

const App = () => {
  const inputRef = useRef();

  useEffect(() => {
    waiting();

    inputRef.current.click();
  }, []);

  const waiting = async () => {
    await inputRef.current.focus();
  };
  return (
    <div>
      <input
        ref={inputRef}
        placeholder="input area"
        type="tel"
        onClick={() => {
          console.log("clicked");
        }}
      />
    </div>
  );
};

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

我正在嘗試通過n8jadams IOS show keyboard on input focus在 React 中重新實現此 javascript 代碼。 不確定我是否在正確的軌道上。 此代碼將確保鍵盤將在 IOS 和 ANDROID 上打開

更新：

得到了這段代碼，但它仍然不起作用：

import React, { useEffect, useRef } from "react";
import ReactDOM from "react-dom";

const App = () => {
  const inputRef = useRef();
  function focusAndOpenKeyboard(el) {
    if (el) {
      // Align temp input element approx. to be where the input element is
      var __tempEl__ = document.createElement("input");
      __tempEl__.style.position = "absolute";
      __tempEl__.style.top = el.offsetTop + 7 + "px";
      __tempEl__.style.left = el.offsetLeft + "px";
      __tempEl__.style.height = 0;
      __tempEl__.style.opacity = 0;
      // Put this temp element as a child of the page <body> and focus on it
      document.body.appendChild(__tempEl__);
      __tempEl__.focus();

      // The keyboard is open. Now do a delayed focus on the target element
      setTimeout(function () {
        el.focus();
        el.click();
        // Remove the temp element
        document.body.removeChild(__tempEl__);
      }, 100);
    }
  }
  useEffect(() => {
    const element = inputRef.current.querySelector("input, textarea");
    focusAndOpenKeyboard(element);
  }, [inputRef]);

  return (
    <div ref={inputRef}>
      <input placeholder="input area" type="tel" />
    </div>
  );
};

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Answer 1

上周我遇到了同樣的問題，經過多天的搜索和嘗試不同的方法（包括您嘗試過的方法）后能夠解決它。 對我產生影響的重要一點是這篇博文的以下句子：

useEffect 處理程序實際上不會運行，因為 React 不會在附加 ref 后重新渲染。 在這種情況下，React 文檔建議改用回調 ref。

所以我這樣嘗試：

const input = useRef();

// Puts searchbar in focus on render if mobile and opens the keyboard on both iOS and Android devices
// Source: https://blog.maisie.ink/react-ref-autofocus/#callback-refs
const callbackRef = useCallback(
    (inputElement: HTMLInputElement): void => {
        input.current = inputElement;
        focusAndOpenKeyboard(inputElement, 150);
    },
    [],
);

return (
<div>
  <input placeholder="input area" type="tel" ref={callbackRef}/>
</div>

);

我希望這對你有幫助，即使我的回答比你的問題晚很多。

在 React 中聚焦並單擊輸入字段

問題描述

1 個解決方案

解決方案1
0 2022-09-29 12:21:54

在 React 中聚焦並單擊輸入字段

問題描述

1 個解決方案

解決方案1 0 2022-09-29 12:21:54

解決方案1
0 2022-09-29 12:21:54