【Vue】v-on:changeイベントを入力方法によって切り替えるにはどうしたら良いでしょうか？

バーコードの番号を入力して登録するシステムを作っています。
例えば次のようなフォームがあるとします。

番号を読み込む方法は２種類あって

直接番号を入力して送信ボタンを押す。
USBバーコードリーダーでスキャンして自動入力。入力後、自動で送信

単体であれば、どちらも実装できるのですが、複合して実装する事が出来ません。

ソースについては後術しますが、
１の方法で直接入力して送信するボタンを押そうとすると、
２の実装のために入力欄に追加しているv-on:changeの発火してしまう為です。

キーボードによる入力は、手動入力の値を確認したいので、任意のタイミングで実行したいです。
この２つを共存させる事は出来ないでしょうか？

ソースコード

下記のようなコンポーネントを作りました。

<template>
<div>
  <div class="form-group row justify-content-center">
    <input
      class="form-control form-control-user col-sm-10"
      type="text"
      name="scan_num"
      placeholder="バーコード読み取り"
      v-model="scan_num"
      v-on:change="scan"
    />
    <button class="btn btn-primary2 col-sm-2" type="button" @click="add">送信する</button>
  </div>
</template>

<script>
export default {
  data () {
    return {
      scan_num: ''
    }
  },
  methods: {
    // バーコード読み込み
    scan() {
      // もし何も入力されてなければイベントを起こさない
      if(scan_num != "") {
        this.add();
      }
    },

    // 追加
    add() {
		// 送信処理
    },
}
</script>

イベントの発火について

キーボードによる入力
バーコードスキャンによる入力

キーボードによる読み込み

キーをタイプして番号を入力
送信ボタンを押下する。

想定していない状況について

入力欄から送信するボタンにカーソルを移動してボタンを押すと２回送信されてしまいます。
原因は次の２つです。

入力欄からフォーカスをずれた事で発火したv-on:change
ボタンをクリックした時に発火するclick

バーコードスキャンによる読み込み

キーボードを読み込む
v-on:changeのイベントが発火する

USBバーコードスキャナーの場合、1の後に入力エリアからフォーカスが外れるので、v-on:changeイベントが実行されるため、
想定した動作をします。

行動規範の内容に同意します

回答3件

ベストアンサー

バーコードリーダにどの製品を使用されているかはわかりませんが、そういった製品は読み込み後にEnterやTabが送られる、あるいは送られるように設定できたと思います
フォーカスが外れる、とのことなので現在Tabが送られているのでは無いでしょうか？

そうであれば、inputのv-on:changeをTabのキーダウンを拾うv-on:keydown.tab に差し替えられかもしれないです。
ただこの場合、キーボードからtabを叩いても反応してしまうので、バーコード・キーボードのどちらでも入力チェックを噛ませる必要が出て来ますが、v-on:changeが無くなるので二重処理は発生しなくなると思います

投稿2019/09/19 01:39

編集2019/09/19 01:57

q_sane_q

総合スコア610

maisumakun

2019/09/19 01:47

確かに、バーコードリーダーが「どんなキーボードイベントをどれだけ送ってくるか」を知るのが先決ですね。

hasshy

2019/09/19 01:53

ご回答ありがとうございます。製品によるかと思いますが、バーコードリーダー入力後のアクションを変える方法もあるのですね。確かにこの設定ができれば割り当てができそうですね。

hasshy

2019/09/19 06:28

ありがとうございます。解決できました。フォーカスが外れると思っていたのですが、思い違いでした。 enterキーにひもづけたところ上手くいきました。

行動規範の内容に同意します

キーボードで入力と変わりません。

では、イベントだけで識別することは困難です。入力速度を調べて、たとえば1秒以内に全桁が入力されればバーコード入力とみなしてそのまま遷移する、というような方法を取るしかないでしょう。

投稿2019/09/19 01:24

maisumakun

総合スコア145975

hasshy

2019/09/19 01:48

ご回答ありがとうございます。確かに、入力速度を測定で判定する方法もありますね。ありがとうございます。

行動規範の内容に同意します

USBバーコードリーダーでスキャンして自動入力。入力後、自動で送信

わざわざ input の v-on:change 経由せず送信すればよいのではないでしょうか

バーコードリーダーでスキャンしたイベントを拾う関数を read() とすると

javascript
1read() {
2  // input に入力
3}
4
5scan() {
6  if(scan_num != "") {
7      this.add();
8   }
9}
10
11add() {
12  // 送信処理
13}
14
15// つまり read() -> input入力 -> scan() -> add() という流れ

と、今していると思うのですが

javascript
1read() {
2  // input に入力
3  this.add(); 
4}
5
6// scan() {} 不要
7
8add() {
9  // 送信処理
10}
11
12// つまり read() -> input入力
13//              -> add()