0
190
Views¿Capacidad para ingresar caracteres de tabulación en un TextField?
Tengo un MUI TextField que se define como multilínea. Mi objetivo es ingresar texto JSON. Descubrí que cuando presioné la tecla de tabulación, mi componente perdió el foco y se centró en el siguiente componente en la pantalla. Lo que deseo es tener el valor de tabulación (\t) ingresado en el texto de la cadena. ¿Hay alguna receta para deshabilitar la tecla de tabulación como herramienta de navegación?
1 answers
Answer question0
De forma predeterminada, si presiona Tabulador en el campo de input , el navegador cambiará el enfoque al siguiente elemento. Para anular ese comportamiento, puede escuchar el evento keydown y llamar a e.preventDefault() , luego agregar código para insertar el carácter de tabulación en la posición del cursor. A continuación se muestra la implementación. Tenga en cuenta que debido a que está manipulando el value de entrada, la función de deshacer ya no funciona:
<TextField multiline onKeyDown={(e) => { const { value } = e.target; if (e.key === 'Tab') { e.preventDefault(); const cursorPosition = e.target.selectionStart; const cursorEndPosition = e.target.selectionEnd; const tab = '\t'; e.target.value = value.substring(0, cursorPosition) + tab + value.substring(cursorEndPosition); // if you modify the value programmatically, the cursor is moved // to the end of the value, we need to reset it to the correct // position again e.target.selectionStart = cursorPosition + 1; e.target.selectionEnd = cursorPosition + 1; } }} />Demo en vivo
