根据条形码读数转移焦点和清除字段

问题描述 投票:0回答:1

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

这是它的样子enter image description here

除非我单击该黑色按钮或使用值*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),清除跟踪字段并将光标发送到跟踪字段以读取新的跟踪编号

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

P.S。没有jQuery。最好是ES6。

javascript vue.js vuejs2
1个回答
0
投票

您在应用程序内部有一个空的返回值,这就是为什么它在“ AddToBatch”条件下表现出奇怪的原因,如果条件或条件类似this.applicationbarcode ===“ AddToBatch” && this.applicationbarcode ===“ CloseShipper”]

if (
      this.applicationbarcode === "*AddToBatch*" ||
      this.applicationbarcode === "*CloseShipper*"
    ) {
      this.applicationbarcode = "";
      return;
    } else {
      this.counter += 1;
    }
© www.soinside.com 2019 - 2024. All rights reserved.