how show QRCode info inside webpage and fill some text input after scan

Question

I have created some QRCode with these info such as address,tell,id,website,name . I want scan QRCode with scanner then these info fill my text input like :

 <input name='tell' value='' />
 <input name='address' value='' />
 <input name='id' value='' />
 <input name='website' value='' />
 <input name='name' value='' />

and then i can submit form . and some time i want show QRCode info in content of page . How can i scan and use QRCode info in website ?

Answer 1

Most QR scanners emulate keyboards so you can listen for keypresses and process the results as they come in.

This example uses jQuery and was written to handle RFID codes (which also have readers which emulate keyboards).

You'll need to adjust it to handle the different structure of the data in your QR code. e.g. this treats Enter as "End of data", but your QR code might have structured it on multiple lines so you may have to use some other method to identify the End of Data.

Then change the send method to do what you want with the data. Here I'm using Socket.IO to send the results to a server. You can change that to split the data up according to your data format and then use DOM manipulation to populate the text inputs.

  var keybuffer = [];

  function press(event) {
    if (event.which === 13) {
      return send();
    }
    var number = event.which - 48;
    if (number < 0 || number > 9) {
      return;
    }
    keybuffer.push(number);
  }

  $(document).on("keypress", press);

  function send() {
    socket.emit('scan', keybuffer.join(""));
    keybuffer.length = 0;
  }