En este post te mostraré algo muy simple pero que no todos sabemos al principio: cómo conectar un lector de código de barras a nuestra aplicación de JavaScript.
Con esto me refiero a un lector de código de barras físico, conectado a la computadora ya sea por USB o PS/2.
Vamos a leer el código de barras y saber cuando el código se ha terminado de leer. Todo esto en la web con JavaScript y un input.
Nota: recuerda que en mi blog ya te enseñé a leer códigos de barras en JavaScript con la cámara del dispositivo, pero no con un lector físico de esos que tienen “luces rojas”.
Funcionamiento del lector
Los lectores son un periférico más en nuestra computadora, así como el ratón y teclado. Básicamente el lector no cuenta con una API o algo complicado para leer, ya que funciona como un teclado.
Lo que hace el lector al encontrar un código de barras es escribirlo (como si fuera un teclado, ya lo dije) y al final presionar la tecla Enter.
Sé que técnicamente el lector debe tener un funcionamiento complejo, pero lo que a nosotros nos importa es saber cómo se comporta al conectarlo, y ya lo dije, es como un teclado que escribe el código leído y presiona Enter.
Nota: puede que haya otro tipo de lectores en donde tal vez debamos usar el puerto serial o cosas complejas, pero hasta donde yo conozco, todos son así de simples.
Conectar JavaScript con lector de código de barras
Entonces al final esto es como trabajar con un teclado, así que vamos a escuchar las pulsaciones del teclado en nuestro input. Para ello podemos escuchar el evento keydown que se desencadena cada vez que el usuario presiona una tecla.
En este evento podemos saber el keyCode, mismo que nos dirá el código de la tecla presionada. Y para la tecla Enter tenemos el keyCode 13.
Entonces vamos a agregar un listener a nuestro input, y si detectamos un Enter significa que el código se ha terminado de leer.
Y ya al momento de leerlo nosotros podemos hacer cualquier cosa con el código de barras leído.
Código JS para leer código de barras
Veamos primero el código HTML, tenemos un simple input y la carga de nuestro script.
Luego tenemos el código JavaScript, en donde recuperamos el elemento (obtenemos una referencia al mismo con querySelector) y le agregamos el listener:
Como puedes ver dentro del listener escuchamos todas las teclas presionadas, pero solo nos interesa cuando se presiona Enter.
Si esa tecla es presionada entonces obtenemos el código de barras leído y lo imprimimos (en este punto ya puedes hacer cualquier cosa con el código leído).
Por cierto, es importante que el input esté enfocado (esto se puede lograr con $codigo.focus()).
Y así es como podemos leer un código de barras con un lector físico en JS de manera muy simple. Obviamente esto funcionará para cualquier lenguaje de programación, solo hace falta leer la cadena y ya.
Puedes probar el ejemplo en este enlace, y por aquí te dejo más tutoriales con JavaScript.
