質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

89.13%

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

解決済

回答 3

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 529

hasshy

score 83

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

イメージ説明

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

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

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

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

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

ソースコード

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

<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>

イベントの発火について

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

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

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

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

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

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

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

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

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

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 3

checkベストアンサー

+2

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

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

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/09/19 10:47

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

    キャンセル

  • 2019/09/19 10:53

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

    キャンセル

  • 2019/09/19 15:28

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

    キャンセル

+1

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

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

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

read() {
  // input に入力
}

scan() {
  if(scan_num != "") {
      this.add();
   }
}

add() {
  // 送信処理
}

// つまり read() -> input入力 -> scan() -> add() という流れ

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

read() {
  // input に入力
  this.add(); 
}

// scan() {} 不要

add() {
  // 送信処理
}

// つまり read() -> input入力
//              -> add()

ではないでしょうか

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/09/19 10:05

    ご回答いただきありがとうございます。
    知識不足で恐縮ですが、独自の関数(今回はread)を何処に紐付けて発火させるのでしょうか?
    v-on:changeを経由した経緯は、バーコードでスキャンされた事を確認するにはトリガーが入力欄の変更しかないかと思った為です。

    キャンセル

  • 2019/09/19 10:13

    説明不足でしたら申し訳ありません。
    補足させていただくと、usbバーコードリーダーは特性上次のような動作をします。

    1.バーコードを読み取る
    2.バーコードを文字列に変換して文字列として入力

    キーボードで入力と変わりません。
    バーコード機器自体にイベントはありません。

    キャンセル

+1

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

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/09/19 10:48

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

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 89.13%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる