【Vue.js】リアルタイム文字カウント機能を作る｜入力制限と残り文字数表示

Vue.jsを使えば、フォーム入力欄に対してリアルタイムで文字数をカウントし、残りの入力可能文字数を表示する機能も簡単に実装できます。本記事では、最大文字数制限とともに、残り文字数の表示や制限超過時の警告を含む実用的な文字カウント機能を紹介します。

リアルタイム文字カウントの用途
基本的な実装例（Vue 3 Composition API）
実装のポイント
応用のアイデア
まとめ

リアルタイム文字カウントの用途

文字カウント機能は、SNS投稿欄、プロフィール入力、問い合わせフォームなど、入力上限が決まっている場面でよく使用されます。Vue.jsのv-modelとcomputedを活用することで、リアクティブな文字数の把握とUI反映が容易に行えます。

基本的な実装例（Vue 3 Composition API）

<template>
  <div class="counter-container">
    <label>自己紹介（{{ remaining }}文字残り）</label>
    <textarea
      v-model="text"
      :maxlength="maxLength"
      rows="4"
      placeholder="最大100文字まで入力できます"
    ></textarea>
    <p :class="{ warning: remaining <= 10 }">{{ text.length }} / {{ maxLength }} 文字</p>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue';

const text = ref('');
const maxLength = 100;

const remaining = computed(() => {
  return maxLength - text.value.length;
});
</script>

<style scoped>
.counter-container {
  max-width: 500px;
  margin: 2rem auto;
}
textarea {
  width: 100%;
  padding: 0.5rem;
  font-size: 1rem;
  border: 1px solid #ccc;
  border-radius: 4px;
}
p {
  text-align: right;
  font-size: 0.9rem;
  margin-top: 0.3rem;
}
.warning {
  color: red;
  font-weight: bold;
}
</style>