• Vue.js

Vue.jsでinputタグに入力された文字数をカウントし、制限をかける方法

Vue.jsでinputタグに入力された文字数をカウントし、ある一定の文字数まできたら制限をかけたい。

本記事ではこの様な悩みを解決。

実装方法について解説します。

実装サンプル

See the Pen
Untitled by Kohei (@kouk05)
on CodePen.0

実装サンプルです。

inputタグで生成された入力フォームに文字を入力。

リアルタイムで文字数をチェックし、pタグに出力。

10文字という制限をかけ、10文字以上は入力できない仕様になってます。

実装手順は以下の通りです。

文字数をカウント

<div id="app">
  <input v-model.trim="message" type="text">
  <p>文字数：{{message.length}}</p>
</div>

<script>
  const app = Vue.createApp({
    data() {
      return {
        message: ''
      }
    },
  });
  app.mount("#app");
</script>

まずは文字数をカウントするコード例です。

v-modalディレクティブを使います。

文字数をカウントしたいhtmlタグにv-modalディレクティブを指定。

空白をカウントしたくない場合は修飾子trimをドット（.）で連結します。

任意の値(本記事ではmessage)を入れます。

Vue.jsを定義。

dataメソッド内にv-modalディレクティブで指定した値を追加。

文字数のカウントをリアルタイムで出力したい箇所に以下を指定。

{{v-modalディレクティブの値.length}}

v-modalディレクティブの値と.lengthを記述。

{{}}で囲います。

以上で文字数がカウントされます。

文字数を制限

<input v-model.trim=”message” maxlength=”10″>

inputタグの文字数制限にはmaxlength属性を使います。

値に制限をかけたい文字数を入れたら完成です。

まとめ

Vue.jsでinputタグに入力された文字数をカウントし、ある一定の文字数まできたら制限をかける方法について紹介しました。

以上で解説を終わります。