掃描捕捉不能蓋掉正在編輯的欄

訂判斷及所需輸入

假設表單 Quantity 原文字5，Code 空白。已選掃描捕捉模式，即使焦點仍在 Quantity，A12 也須去 Code。錯監聽器會沿焦點加成5A12。模式是明確選擇，不是靠速度認硬件。

已填本地測試工作表
情況	輸入 JSON
原例測試	{"capture":true,"keys":["A","1","2","Enter"]}

下載可編輯 CSV ↓

跑所附比較

例子把鍵事件送進真正 DOM 監聽器，再查兩欄。只核此路由，未確認掃描驅動程式，亦未接受 Quantity 為有效數字。

錯誤及所需輸出
路徑	輸出 JSON
錯誤路徑	{"quantity":"5A12","code":""}
所需路徑	{"quantity":"5","code":"A12"}

下載可編輯 CSV ↓

Node24.14.1 程序；須 Playwright1.63 Chromium

import assert from 'node:assert/strict';
import {createRequire} from 'node:module';
const htmlEscape=s=>String(s).replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/"/g,'&quot;');
async function withPage(action,options={}){
  const require=createRequire(import.meta.url);const {chromium}=require('playwright');
  const browser=await chromium.launch({headless:true});
  try{const context=await browser.newContext(options);const page=await context.newPage();
    const requests=[];await page.route('**/*',route=>{requests.push(route.request().url());return route.abort();});
    return await action(page,context,requests);
  }finally{await browser.close();}
}

const run=async function run(i,corrected=true){
    if(typeof i.capture!=='boolean')return {held:true};
    return withPage(async page=>{await page.setContent('<label>Quantity<input id="quantity" value="5"></label><label>Code<input id="code"></label>');
      await page.evaluate(({corrected,capture})=>{document.addEventListener('keydown',e=>{if(e.key==='Enter')return;const target=corrected&&capture?document.querySelector('#code'):document.activeElement;target.value+=e.key;});},{corrected,capture:i.capture});
      await page.focus('#quantity');for(const key of i.keys)await page.dispatchEvent('#quantity','keydown',{key});
      return page.evaluate(()=>({quantity:document.querySelector('#quantity').value,code:document.querySelector('#code').value}));});
  };
const cases=[{"input":{"capture":true,"keys":["A","1","2","Enter"]},"corrected":false,"expected":{"quantity":"5A12","code":""}},{"input":{"capture":true,"keys":["A","1","2","Enter"]},"corrected":true,"expected":{"quantity":"5","code":"A12"}},{"input":{"capture":false,"keys":["A"]},"corrected":true,"expected":{"quantity":"5A","code":""}},{"input":{"capture":true,"keys":[]},"corrected":true,"expected":{"quantity":"5","code":""}}];
for(const test of cases){const actual=await run(test.input,test.corrected);assert.deepEqual(actual,test.expected);console.log(actual);}

下載可執行例子 ↓

按邊界依據作判斷

手動模式沿焦點文字欄，可成5A，之後仍須核數量；沒有掃描字則兩欄不變。

選明確捕捉模式
普通欄有焦點時送事件
核兩欄最後值

普通修改後仍按該欄規則驗值。

可編輯邊界輸入及結果
條件	輸入 JSON	預期輸出 JSON
沿普通手動輸入	{"capture":false,"keys":["A"]}	{"quantity":"5A","code":""}
沒有掃描字	{"capture":true,"keys":[]}	{"quantity":"5","code":""}

下載可編輯 CSV ↓

原例捕捉後，兩欄應各是甚麼？

查看參考答案

Quantity 仍5，Code 是 A12。捕捉指令不等於獲准改另一欄。

訂判斷及所需輸入

跑所附比較

按邊界依據作判斷

相關資源