基于条形码读取 (VueJS) 转移焦点和清除字段

Question

我正在编写一个在键盘输入上运行的应用程序，但主要是作为条形码驱动的应用程序。我很难在每次按钮提交后清除某些字段以重置表单以及重新关注正确的字段（空字段）

这就是它的样子

除非我单击黑色按钮或扫描带有值*CloseShipper* 的条形码，否则发货人 ID 不会清除。它还会在页面第一次加载时加载为空。

当我单击“添加到批处理”按钮或扫描值为*AddToBatch* 的条形码时，跟踪# 字段会清除并获得焦点。

在我扫描应用程序并将其添加到显示在其下方的数组中后，应用程序条形码字段立即清除，并以正确的方式接收焦点以继续不间断地扫描，直到我通过单击或扫描“添加到批处理”完成该过程。 （这部分工作）

我的问题是当我扫描*AddToBatch* 条形码时，什么也没有发生。如果我单击它，则单击事件正在注册，它正在清除需要清除的字段，但焦点仍在 appbarcode 上。所以，这是两个分开的问题。

抱歉，我无法重现工作小提琴。太多的依赖项无法正常工作。所以我把相关代码贴在这里。

模板：

 <form class="uk-form-horizontal uk-margin-medium barcodefields">
    <div v-if="reset">
        <div class="uk-margin">
           <label 
              class="uk-form-label" 
              :for="_uid+'ctsinput'">
              Shipper ID
           </label>
           <div class="uk-form-controls">
              <input
                 class="uk-input"
                 :id="_uid+'ctsinput'"
                 name="shippernumber"
                 type="text"
                 maxlength="24"
                 :autofocus="'autofocus'"
                 v-focus
                 v-model.trim="shipperbarcode"
                 @input="runException"
              />
           </div>
        </div>
        <div class="uk-margin">
           <label 
              class="uk-form-label" 
              :for="_uid+'ctsinput'">
              Tracking #
           </label>
           <div class="uk-form-controls">
              <input
                 class="uk-input"
                 :id="trackingNumber"
                 name="trackingnumber"
                 type="text"
                 maxlength="24"
                 v-model.trim="trackingbarcode"
                 @input="runException"
              />
           </div>
        </div>
        <div class="uk-margin">
            <label 
               class="uk-form-label" 
               :for="_uid+'ctsinput'">
               App. Barcode #
            </label>
            <div class="uk-form-controls">
               <input
                 class="uk-input"
                 :id="_uid+'ctsinput'"
                 name="appbarcode"
                 type="text"
                 maxlength="24"
                 v-model.trim="applicationbarcode"
                 @change="addApplication"
               />
             </div>
         </div>

         <!-- This is the list of apps scanned -->
         <h5
            v-if="this.appList.length !== 0"
            class="heading-app-scanned"
            >Applications Scanned In This Batch</h5>
            <div
              v-if="this.appList.length !== 0"
              class="uk-card uk-card-secondary app-collection"
              >
              <div 
                 v-for="appItem in appList" 
                 :key="appItem.id" 
                 class="app-scanned-item">
                 <div class="uk-padding-small">
                   <label class="uk-form-label">Application #:</label>
                   <span class="uk-text">{{appItem}}</span>
                 </div>
                 <div class="uk-divider"></div>
              </div>
             </div>
       </div>
    </form>

在我的脚本中，除了所有的道具和数据等，这里是逻辑部分：

  methods: {
  ...mapActions(["fetchBatches"]),
  // evaluating the value of the shipperbarcode and trackingbarcode
  runException: function(e) {
    this.shipperbarcode = this.shipperbarcode.replace(/[^0-9.]/g, "");
    this.trackingbarcode = this.trackingbarcode.replace(/[^0-9.]/g, "");
  },

  // evaluating what happens when an app is scanned
  addApplication: function(e) {
    let appBar = this.applicationbarcode;

    if (
      this.applicationbarcode === "*AddToBatch*" ||
      this.applicationbarcode === "*CloseShipper*"
    ) {
      this.applicationbarcode = "";
      return;
    } else {
      this.counter += 1;
    }
    //give access to the add to batch function to trigger the modal window and close batch
    this.addToBatch();
    // send the qualifying barcodes to an array and clear the field for the next scan
    this.appList.push(this.applicationbarcode);

    //give focus to the tracking number after a batch has been made
    document.addEventListener("change", function(appBar) {
      if (appBar === "*AddToBatch*") {
        this.appList = [];

        this.shipperbarcode = document.querySelector(
          "input[name=shippernumber]"
        ).value;
        this.trackingbarcode = "";

        let hasFocus = document.querySelector("input[name=trackingnumber]");
        hasFocus.focus();
        // after entering a new tracking number pass the focus to the barcode input
        if (hasFocus.value.length > 0) {
          hasFocus = document.querySelector("input[name=appbarcode]");
          hasFocus.focus();
        } else {
          hasFocus = document.querySelector("input[name=trackingnumber]");
          hasFocus.focus();
        }
      }
    });
    this.applicationbarcode = "";
    this.applicationbarcode = this.applicationbarcode.replace(/[^0-9.]/g, "");
  },
  addedToBatch: function() {
    this.addToBatch("*AddToBatch*");
  },
  // When the add to batch button is scanned
  addToBatch: function(appBar) {
    // open the modal if the counter is above 25. This will be rewritten to read from server as the 25 can differ
    if (this.counter >= 25) {
      UIkit.modal("#closeBatchDialog").show();
    }

    // if the counter is > 0 show the close batch button
    if (this.counter > 0) {
      this.finishBatch = true;
    }

    // If the app barcode is Add to Batch barcode give shipper # input field the value it already has
    // and clear the tracking number field. ********** Must exist for click event
    if (appBar === "*AddToBatch*") {
      this.appList = [];

      this.shipperbarcode = document.querySelector(
        "input[name=shippernumber]"
      ).value;
      this.trackingbarcode = "";

      //give focus to the tracking number after a batch has been made
      let hasFocus = document.querySelector("input[name=trackingnumber]");
      hasFocus.focus();
      // after entering a new tracking number pass the focus to the barcode input
      if (hasFocus.value.length > 0) {
        hasFocus = document.querySelector("input[name=appbarcode]");
        hasFocus.focus();
      } else {
        hasFocus = document.querySelector("input[name=trackingnumber]");
        hasFocus.focus();
      }
    }
  },

  // if the close shipper barcode is scanned
  closeShipper: function(e) {
    // if the barcode for close shipper is scanned
    if (this.applicationbarcode === "*CloseShipper*") {
      // clear all fields
      this.appList = [];
      this.shipperbarcode = "";
      this.trackingbarcode = "";
      // give the shipper id field focus
      document.addEventListener("change", function() {
        let hasFocus = document.querySelector("input[name=shippernumber]");
        hasFocus.focus();
      });
    }
  },
  sendFocus: function(e) {
    document.addEventListener("keydown", function(e) {
      var input = e.target.nodeName.toLowerCase() === "input";
      var form = e.target.form;
      if (e.key === "Enter" && input) {
        var index = Array.prototype.indexOf.call(form, e.target);
        form.elements[index + 1].focus();
      }
    });
  }
},
created() {
  let that = this;
  this.fetchBatches().then(function() {
    that.sendFocus();
  });
}

我尽可能多地发表评论。 addApplication 方法是验证条形码是数字或 AddToBatch 的方法。如果是数字条码，则将其推送到数组，因为它被识别为普通条码格式。如果它正在读取AddToBatch，则清空数组（稍后会将数组放入API），清空跟踪字段并将光标发送到跟踪字段以读取新的跟踪号

任何帮助将不胜感激。我是这个特殊技能中唯一的一个，这很糟糕:(谢谢

附：没有 jQuery。最好是 ES6。

Answer 1

您在应用程序中有一个空返回，这就是为什么它在“AddToBatch”条件下表现得很奇怪，如果条件或条件应该像 this.applicationbarcode === "AddToBatch" && this.applicationbarcode === "CloseShipper"

if (
      this.applicationbarcode === "*AddToBatch*" ||
      this.applicationbarcode === "*CloseShipper*"
    ) {
      this.applicationbarcode = "";
      return;
    } else {
      this.counter += 1;
    }