Estoy tratando de enfocar y luego hacer clic en el campo de entrada con la ayuda del gancho useRef. Lo que estoy tratando de lograr es abrir el teclado del campo de entrada en el navegador del teléfono móvil de IOS y ANDROID. Desafortunadamente, no funciona en mi caso y no estoy seguro de por qué. Tenga en cuenta que el registro de la consola muestra que se hizo clic. Aquí está mi código:
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);Estoy tratando de volver a implementar este código javascript por n8jadams IOS show keyboard on input focus en React. No estoy seguro si estoy en el camino correcto. Este código asegurará que el teclado se abra tanto en IOS como en ANDROID
ACTUALIZAR:
obtuve este código pero todavía no funciona:
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);