如何拆分input内的字符串并将拆分结果插入到其他不同input框中

存在的问题 #

• 函数调用直接写在input标签属性中，未绑定对应触发事件，逻辑完全不生效
• 扫描完成向qrstring赋值后，没有主动调用拆分函数，赋值逻辑从未执行
• 使用attr('value')获取输入框值，仅能拿到页面初始渲染的默认值，无法获取扫描后动态写入的内容
• 拆分分隔符使用<br>不符合常规二维码扫描结果的换行格式，通常二维码内的换行符为\n
• 两个label使用了重复的id属性，不符合HTML语法规范

修正后代码 #

JS代码 #

function qrData(value) {
  if (value.length == 2) {
    // 用val()方法赋值，适配动态更新的dom属性
    $(".idnum").val(value[0].trim());
    $(".idname").val(value[1].trim());
  } else {
    alert("malformed strings");
  }
}

let scanner = new Instascan.Scanner({
  video: document.getElementById('preview'),
  mirror: false
});
scanner.addListener('scan', function(c) {
  document.getElementById('qrstring').value = c;
  // 若确认二维码的分隔符为<br>，可将下方的\n替换为<br>
  const strings = c.split('\n');
  qrData(strings);
});
Instascan.Camera.getCameras().then(function(cameras) {
  if (cameras.length > 0) {
    scanner.start(cameras[0]);
  } else {
    console.error('No cameras found.');
    alert('No cameras found.');
  }
}).catch(function(e) {
  console.error(e);
  alert(e);
});

HTML代码 #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<input type="hidden" id="qrstring" value="">
<label>Account ID </label>
<input type="text" name="accId" required="" class="idnum" style="width: 108px;margin-right: 15px;" value="">
<br/>
<label>Customer Name </label>
<br/>
<input type="text" readonly="" name="name" class="idname" required="" value="">

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