如何在javascript中读取多个值长度？

Question

我正在使用条形码扫描仪，目前遇到一个问题，我需要条形码读取 2 个不同的值长度，目前我将其设置为以 9 长度提交值。

          <span>

                <input type="text" id="IC-input" name="IC" onkeyup="autofill(this.value)" placeholder="Enter your IC Number" required maxlength="12">

                <label><button type="button" id="theButton" onclick="theButtonIsPressed()">Submit</button></label>

          </span>

        function autofill(value){

        console.log("Autofill:"+value)

        //console.log(9 digits);

        button = document.getElementById("theButton");

        if(value.length == 9){

            console.log('form is ready to submit');

            theButtonIsPressed(value);

        } 

    }

现在我也需要它从 12 个值读取，但是当该值达到 9 位时它会自动提交。我试过 OR 功能。

        function autofill(value){

        console.log("Autofill:"+value)

        //console.log(9 digits);

        button = document.getElementById("theButton");

        if(value.length == 12 || value.length == 9){

            console.log('form is ready to submit');

            theButtonIsPressed(value);

        } 

    }

我也试过 Else 函数

        function autofill(value){

        console.log("Autofill:"+value)

        //console.log(9 digits);

        button = document.getElementById("theButton");

        if(value.length == 12){

            console.log('form is ready to submit');

            theButtonIsPressed(value);

        } 

        else if(value.length == 9){

            theButtonIsPressed(value);

        }

    }

但它总是会读取前 9 个值，而不会读取其他 3 个值。有人对此有解决方案吗？先感谢您。

Answer 1

好像你在听按键。使用计时器取消它。去抖动方法的基本思想。var timer;function autofill(value){&nbsp; if (timer) window.clearTimeout(timer);&nbsp; if(value.length === 9){&nbsp; &nbsp; timer = window.setTimeout( function () {&nbsp; &nbsp; &nbsp; processIt(value);&nbsp; &nbsp; }, 50);&nbsp; } else if(value.length === 12){&nbsp; &nbsp; processIt(value);&nbsp; }&nbsp;}function processIt(value){&nbsp; console.log('here', value);}但这是一个糟糕的解决方案。通常，您将扫描仪设置为触发标签或输入 press，这样您就知道它已完成。我会检查是否发生这种情况，然后改为倾听。然后你可以只听那个，你就知道扫描仪已经完成了。var inp = document.getElementById("barcode");inp.addEventListener("keydown", function (evt) {&nbsp; if (["Tab", "Enter"].includes(evt.key)) {&nbsp; &nbsp; evt.preventDefault();&nbsp; &nbsp; console.log('scanner is done', evt.target.value);&nbsp; }});<input type="text" id="barcode" />

Answer 2

对于最常见的场景，扫描仪会一个一个触发这样的事件：焦点，输入字符....输入最后的'Enter'字符，所以你必须关注最后一个事件。<script type="text/javascript">&nbsp; &nbsp; window.addEventListener("load", function () {&nbsp; &nbsp; &nbsp; &nbsp; var ic = document.getElementById("IC-input");&nbsp; &nbsp; &nbsp; &nbsp; ic.addEventListener("focus", function (args) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ic.value = "";&nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; &nbsp; &nbsp; ic.addEventListener("keyup", function (args) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if (args.key == "Enter") {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; autofill(ic.value);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; });&nbsp; &nbsp; function autofill(value) {&nbsp; &nbsp; &nbsp; &nbsp; console.log("Autofill:" + value)&nbsp; &nbsp; &nbsp; &nbsp; //console.log(9 digits);&nbsp; &nbsp; &nbsp; &nbsp; button = document.getElementById("theButton");&nbsp; &nbsp; &nbsp; &nbsp; if (value.length == 9) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; console.log('form is ready to submit');&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; theButtonIsPressed(value);&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; }</script><span>&nbsp; &nbsp; <input type="text" id="IC-input" name="IC" onkeyup="input_keyup" placeholder="Enter your IC Number" required maxlength="12">&nbsp; &nbsp; <label><button type="button" id="theButton" onclick="theButtonIsPressed()">Submit</button></label></span>

Answer 3

问题是一旦输入框有 9 个字符，自动填充功能就会运行以按下按钮。这是因为您正在通过附加到输入标签的“onkeyup”事件侦听器运行自动填充功能。解决方案是在确保有预期的全长值后运行自动填充功能。祝你好运。