Блог

Главная - Вопросы по программированию - как прочитать длину нескольких значений в javascript?

как прочитать длину нескольких значений в javascript?

#javascript #html

#javascript #HTML

Вопрос:

Я работаю над сканером штрих-кодов, и в настоящее время у меня проблема, когда мне нужен штрих-код для считывания 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 цифр. Я пробовал ИЛИ функционировал .

         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 значения. Есть ли у кого-нибудь решение для этого? Заранее благодарю вас.

Комментарии:

1. Насколько я понимаю, ваша функция запускается при каждом изменении поля ввода, верно?

2. Да, автоматически.

Ответ №1:

Похоже, вы слушаете нажатие клавиши. Используйте таймер, чтобы отменить его. Основная идея метода debounce.

 var timer;
function autofill(value){
  if (timer) window.clearTimeout(timer);
  if(value.length === 9){
    timer = window.setTimeout( function () {
      processIt(value);
    }, 50);
  } else if(value.length === 12){
    processIt(value);
  } 
}

function processIt(value){
  console.log('here', value);
}

НО это плохое решение.Обычно вы настраиваете сканер на нажатие клавиши tab или enter, чтобы вы знали, что это сделано. Я бы проверил, происходит ли это, и вместо этого прослушал это. Затем вы можете просто прослушать это, и вы знаете, что сканирование завершено.

 var inp = document.getElementById("barcode");
inp.addEventListener("keydown", function (evt) {
  if (["Tab", "Enter"].includes(evt.key)) {
    evt.preventDefault();
    console.log('scanner is done', evt.target.value);
  }
});  
 <input type="text" id="barcode" />

Комментарии:

1. Отличная идея, однако, если кто-то медленно печатает или останавливается по какой-либо причине после ввода 9 символов, он обработает

2. Вы имеете в виду, что данные вводятся автоматически с устройства? Или пользователь вводит его вручную?

3. Это устройство…. Он считывает штрих-код и вводит значение

4. Если у вас есть входные <input type="text" данные, они отображаются на HTML-странице, верно?

5. Я пытаюсь понять, как это работает. Если пользователь использует сканер, то сканер отправляет целое сообщение, состоящее из 9 или 12 символов, верно? Или он отправляет символы один за другим?

Ответ №2:

Проблема в том, что функция автозаполнения запускается для нажатия кнопки, как только поле ввода содержит 9 символов. Это потому, что вы запускаете функцию автозаполнения с помощью прослушивателя событий onkeyup, прикрепленного к тегу ввода.

Решение состоит в том, чтобы запустить функцию автозаполнения после того, как убедитесь, что предназначено значение полной длины. Удачи.

Ответ №3:

Для наиболее распространенной сцены сканер будет запускать такие события одно за другим: фокус, ввод символа …. введите последний символ «Enter», поэтому вам нужно обратить внимание на последнее событие.

 <script type="text/javascript">
    window.addEventListener("load", function () {
        var ic = document.getElementById("IC-input");
        ic.addEventListener("focus", function (args) {
            ic.value = "";
        });
        ic.addEventListener("keyup", function (args) {
            if (args.key == "Enter") {
                autofill(ic.value);
            }
        });
    });
    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);
        }
    }
</script>
<span>
    <input type="text" id="IC-input" name="IC" onkeyup="input_keyup" placeholder="Enter your IC Number" required maxlength="12">
    <label><button type="button" id="theButton" onclick="theButtonIsPressed()">Submit</button></label>
</span>