Preserve line feeds in scanner input in HTML element

Question

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;
            }
        }
     }

Answer 1

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>

Answer 2

You can also try using a tag

<code></code> 

Answer 3

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.

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.