¿Evento de entrada de texto sin enfoque de entrada?
Estoy construyendo una aplicación Angular/Ionic que recibe datos de entrada de un escáner portátil. En lugar del método típico de teclado en cuña de un carácter a la vez y escuchar eventos individuales de tecla para construir datos de códigos de barras, el escáner con el que estoy trabajando ofrece la capacidad de recibir todos los datos del código de barras a la vez, similar a un copiar/pegar. Esto es extremadamente preferible para mí porque es MUCHO más rápido para códigos de barras largos.
El problema es que esto solo sucede si un campo de texto tiene el enfoque. Cuando un campo de entrada tiene el enfoque, se genera un TextEvent
de tipo textInput
(consultar documentación aquí) y los datos se copian en el campo de entrada. Esto no sería un problema si pudiera escuchar algún evento para establecer el enfoque en el campo de entrada, pero no se generan eventos a menos que ya tenga el enfoque. Por razones en las que no entraré, supongamos que no puedo depender de ningún tipo de enfoque automático o establecer manualmente el enfoque en la carga de la página.
Por supuesto, podría requerir que los usuarios toquen un campo de entrada antes de escanear, pero eso sería muy mala experiencia de usuario.
He utilizado el método monitorEvents(window)
en las herramientas de desarrollo de Chrome y he confirmado que no se generan eventos a menos que un campo de entrada tenga el enfoque.
Lo que estoy buscando es alguna forma de capturar y recibir cualquier entrada de texto que fluya hacia la aplicación. Mi intuición me dice que TIENE que provenir de alguna parte, de lo contrario, ¿cómo sabría la aplicación/navegador dónde ponerlo en el elemento de entrada enfocado en primer lugar?
davy.ai
Una posible solución a este problema es crear un elemento de entrada oculto y establecer el enfoque en él programáticamente. Esto se puede hacer utilizando el decorador
ViewChild
en Angular para obtener una referencia al elemento de entrada oculto, y el servicioRenderer2
para establecer el enfoque en él.Aquí tienes un ejemplo de implementación:
ViewChild
yRenderer2
:setFocusOnHiddenInput
siempre que quieras recibir entrada desde el escáner:Esto debería permitirte recibir entrada desde el escáner incluso cuando ningún elemento de entrada tiene el enfoque. Los datos del escáner se copiarán en el elemento de entrada oculto, que luego puedes acceder programáticamente en el código de tu componente y utilizar según sea necesario.