如何在HTML元素中保留扫描器输入的换行符？

我用Zebra DS9908扫描器扫描条码，想把数据展示在HTML页面上，要求保留所有输入字符（包括换行符）。试过<div>和<textarea>，但条码里的换行符都被剥离了，加white-space: pre-wrap样式也没用。
注：扫描器是键盘输入模式，在记事本里扫描能正常保留换行符。

更新1 #

扫描的是驾照的PDF417条码，数据遵循AAMVA标准，示例数据：

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

只需要把所有字符（含换行符）输出到HTML元素里，换行用来分隔字段。

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

问题根源 #

1. keypress事件在部分浏览器中不会触发Enter键，无法完整捕获所有按键输入；
2. 直接拼接innerHTML会让浏览器自动解析HTML标签，导致原始字符被处理，用<BR>模拟换行也无法保留真实的换行符（不利于后续字段解析）；
3. 之前用<textarea>没生效，大概率是没正确绑定输入事件，或者没利用好其原生支持多行文本的特性。

修复方案 #

方案1：改用<textarea>（推荐，原生适配换行需求）

<textarea>天生支持多行文本，能直接保留换行符，不需要额外样式：

<textarea id="scannedData" style="width:250px;height:750px; outline: 5px dotted green;"></textarea>

同时把事件换成keydown（能捕获所有按键，包括Enter）：

document.addEventListener('keydown', keypressHandler);

function keypressHandler(event) {
    var scannerOutput = document.getElementById('scannedData');
    // 阻止浏览器默认输入行为，避免干扰自定义逻辑
    event.preventDefault();
    if (event.key === 'Enter') {
        // 直接添加原生换行符，textarea会自动渲染换行
        scannerOutput.value += '\n';
        parseDriverLicense();
    } else {
        scannerOutput.value += event.key;
    }
}

方案2：修复原有<div>实现

如果必须用<div>，需要做两处关键修改：

1. 替换keypress为keydown，确保能捕获Enter键；
2. 用textContent代替innerHTML插入内容，避免HTML解析丢失原始字符，同时保留white-space: pre-wrap样式：

<div id="scannedData" contenteditable="true" style="width:250px;height:750px; outline: 5px dotted green; white-space: pre-wrap;"></div>

document.addEventListener('keydown', keypressHandler);

function keypressHandler(event) {
    var scannerOutput = document.getElementById('scannedData');
    event.preventDefault();
    if (event.key === 'Enter') {
        scannerOutput.textContent += '\n';
        parseDriverLicense();
    } else {
        scannerOutput.textContent += event.key;
    }
}

额外说明 #

• 扫描器的键盘模式会模拟真实按键输入，keydown事件能确保捕获所有按键类型，包括特殊控制键；
• textContent和<textarea>的value属性都会原样保留输入的字符，不会做HTML解析，完美匹配保留原始条码数据的需求；

内容的提问来源于stack exchange，提问作者Mr Smith