1

I'm using a Zebra DS9908 scanner to scan a bar code and put the data on an HTML page. What element should I use to preserve all input characters? I've tried both a <div> and <textarea>, but in both cases the line feed characters between the records in the bard code data are being stripped off. I've tried "white-space: pre-wrap", but that has no effect.

Note, the scanner works via keyboard input. When I scan the barcode into notepad, it works fine.

UPDATE 1

The data is driver's license data. The bar code is PDF417 and the data formats are from AAMVA. A sample of the data is below. I don't have any questions on that. I'm trying to find a way to stream ALL characters to an HTML element, including line feeds. Line feed are used to separate the fields.

ANSI 6360100102DL00390183ZF02220047DLDAAJDOE,JOHN
DAG555 5th St
DAIMIAMI
DAJFL
DAK38451
DAQH50000000000

UPDATE 2

html

<div id = "scannedData" contenteditable="true" style="width:250px;height:750px; outline: 5px dotted green; white-space: pre-wrap;white-space: -moz-pre-wrap;white-space: -pre-wrap;white-space: -o-pre-wrap; word-wrap: break-word;-webkit-line-break:normal;"></div>

javascript

document.addEventListener('keypress', keypressHandler);

    function keypressHandler(event) {
        var scannerOutput = document.getElementById('scannedData');
        if (event.length != 0) {
            if (event.key == 'Enter') {
                scannerOutput.innerHTML += "<BR>";
                parseDriverLicense();
    
            } else {
                scannerOutput.innerHTML += event.key;
            }
        }
     }
Mr Smith
  • 3,318
  • 9
  • 47
  • 85
  • Have you found an answer? I'm encountering the same issue with a Zebra DS457 also reading a driver's license PDF417 – penguinv22 Mar 22 '23 at 17:23
  • 1
    I think the code above is what I did. I'm at home today & my scanner is at the office. That populates a div. The key ( if remember correctly) is adding the
    tag for each line. I don't remember if all the extra css is needed on the div. I'll check tomorrow.     – Mr Smith Mar 22 '23 at 19:25

3 Answers3

0

I found this question in stack overflow: Multiple lines of input in <input type="text" />

Have you tried the textarea html tag? That one supports multiple lines of data.

An example of using a textarea html tag:

<textarea name="Text1" cols="40" rows="5"></textarea>
Ivar Harris
  • 156
  • 3
  • the scanner can send input to the textarea, but the line feeds are being stripped out. I'm not sure how prevent that from happening. The scanner is definitely working because the line feeds are there when I send the data to Notepad. – Mr Smith Jul 20 '22 at 22:42
  • Can you show an example of what data is in the barcode, and maybe a screenshot of the barcode please? Oh and I almost forgot to ask, which model of zebra scanner are you using? – Ivar Harris Jul 20 '22 at 22:57
  • See the updated question. It's more of a browser question. Why are the line feed characters being stripped and how can I stop that? – Mr Smith Jul 20 '22 at 23:10
  • Can you open the Zebra 123Scan program, Then click "Clone/modify my connected scanner settings", then click "Print/Save parameters". The screen will show what the settings are for your scanner. Can you post the settings for us please, so we can look at it. – Ivar Harris Jul 21 '22 at 01:01
  • 1
    it is attached. Note, I get the line feed when pointing to notepad, but not when pointing to a – Mr Smith Jul 21 '22 at 12:51
  • Your configuration is minimal, which is good for us troubleshooting. I found some documentation about a solution that someone else came up with regarding the pdf417 and driver licenses: https://www.dynamsoft.com/codepool/javascript-driver-license-pdf417-web.html.. I'm still going to continue on this journey to figure out the simplest answer to your question. – Ivar Harris Jul 21 '22 at 14:03
0

You can also try using a tag

<code></code>
Poker Player
  • 146
  • 1
  • 4
0

I was successfully able to scan with line breaks into my web application using a Zebra DS4608 and Zebra DS457. My web application uses "Notes" field which I think is programmed as a textarea.

I used Zebra's 123Scan utility to set the necessary parameters and program custom ADF rules to modify the data.

This is a screenshot (redacted) of the driver's license output with factory defaults prior to making the following modifications. See AAVMA PDF417 Driver's License Specification.

enter image description here

In 123Scan do the following:

  1. Enable Keypad Emulation (default?)
  2. Enable Function Key Mapping (critical)
  3. Program ADF rules (critical) a. Skip 3 characters (to avoid modifying first <LF> in @<LF><RS><Enter>ANSI<SP> sequence)
    b. Replace all patterns (change every <LF> except the first to <Enter><LF>). Note that the 123Scan ADF editor has these special codes as selectable values.
    c. Skip back to start (this was not obvious to me but you will need to read from the beginning in the next step)
    d. Send all that remains.
penguinv22
  • 349
  • 5
  • 12