12 回閲覧されました

みなさんこんにちは、jonioです。

今回はvue.jsの@beforeinputについて簡単なサンプルコードで解説します。

Laravelの無料学習サイトを作りました

Laravelを勉強したい人向けの無料の学習サイトを作りました。

ここからリンクに飛べますのでぜひ利用してください。

@beforeinputとは

例えばフォームに値を入力した時に実際に値が変わる直前に発火するイベントです。

やっていることは分かると思いますがどんな時に使うかのイメージが湧かないと思うのでサンプルコードで解説します。

サンプルコード

フォームに値を入力している時に10文字を超える入力ができない状況を考えます。

<template>
  <div>
    <input
      v-model="text"
      @beforeinput="onBeforeInput"
      placeholder="最大10文字まで"
    />
    <p>{{ text.length }} / 10</p>
  </div>
</template>

<script setup>
import { ref } from 'vue';
const text = ref('');

const onBeforeInput = (e) => {
  const incoming = e.data ?? '';

  if (['insertText', 'insertFromPaste'].includes(e.inputType)) {
    const nextLen = e.target.value.length + incoming.length;
    
    if (nextLen > 10) {
      e.preventDefault(); // ← 変更を無効化
    }
  }
}
</script>

<template>
  <div>
    <input
      v-model="text"
      @beforeinput="onBeforeInput"
      placeholder="最大10文字まで"
    />
    <p>{{ text.length }} / 10</p>
  </div>
</template>

<script setup>
import { ref } from 'vue';
const text = ref('');

const onBeforeInput = (e) => {
  const incoming = e.data ?? '';

  if (['insertText', 'insertFromPaste'].includes(e.inputType)) {
    const nextLen = e.target.value.length + incoming.length;
    
    if (nextLen > 10) {
      e.preventDefault(); // ← 変更を無効化
    }
  }
}
</script>

19行目の「e.inputType」・「insertText」・「insertFromPaste」から説明します。

「e.inputType」は@beforeinputを使う時のイベントの種類という意味です。

「insertText」・「insertFromPaste」はイベントです。

イベントは下記があります。

• insertText: キーボードで文字を入力
• insertFromPaste: クリップボードから貼り付け
• deleteContentBackward: バックスペースで削除
• deleteContentForward: Deleteキーで削除
• insertFromDrop: ドラッグアンドドロップで挿入

だから19行目はイベントがキーボードで文字の入力をした時もしくはペーストで貼り付けをした時という意味です。

10文字の入力をした時の処理は22行目〜24行目です。

フォームに値の入力ができなくするのは@beforeinputの中でe.preventDefault()を使うことで実現できます。