Estoy tratando de implementar un teléfono en pantalla que recibe información del teclado o al hacer clic en los números en la pantalla.

El campo de entrada ya funciona para implementaciones clave (escribiendo 1 2 3 ....) naturalmente y donde está el cursor (probablemente desde .selectionStart). Tengo un tiempo imposible de rastrear la posición del cursor cuando hago clic en el teclado en pantalla. He probado bastantes implementaciones diferentes, pero la actual es:

 <input type="text" className="phone-pad-input" id="phone-input" onChange={(e) => handleKeypress(e)} onFocus={(e) => {e.target.selectionStart = props.cursorPosition}} // coded this last week forget if it even works or does anything autoFocus={true} // I want the phone's input focused 100% of the time it's up autoComplete="off" onBlur={({ target }) => target.focus()} value={props.number}> </input>

El teclado de mi pantalla es una tabla donde cada número es:

 <td className="..." onClick={() => handleKeyClicked(#)}></td>

Función para handleKeyClicked:

 const handleKeyClicked = (num: any) => { const phoneKeyPad = document.getElementById('phone-input') const cursorPosition = (phoneKeyPad as HTMLInputElement).selectionStart console.info("CURSOR POS:", cursorPosition) // this is ALWAYS 0 // ... logic to put my number in the correct spot with slicing based on cursorPosition }

¿Hay alguna forma de obtener .selectionStart desde este onclick en el teclado del teléfono? Si mi valor es: 1245 y tengo el cursor (parpadeando) entre el 2 y el 4. Presiono el "3", todavía dice que la posición del cursor es 0 y se agregará o antepondrá dependiendo de cómo lo codifiqué. Abrí Google Voice para probar su teléfono y también agrega los números (12453) independientemente de la posición del cursor.

gracias por cualquier ayuda