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

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

const text = ref('')
const maxLength = 100
const remaining = computed(() => maxLength - text.value.length)
</script>

<template>
  <label>自己紹介（{{ remaining }}文字残り）</label>
  <textarea v-model="text" :maxlength="maxLength"></textarea>
  <p :class="{ warning: remaining <= 10 }">{{ text.length }} / {{ maxLength }} 文字</p>
</template>

// utils/countChars.js
// 人が「1文字」と数える単位（書記素）で数える
const segmenter =
  typeof Intl !== 'undefined' && typeof Intl.Segmenter === 'function'
    ? new Intl.Segmenter('ja', { granularity: 'grapheme' })
    : null

export function countChars(value) {
  if (segmenter) {
    let count = 0
    for (const _ of segmenter.segment(value)) count++
    return count
  }
  // Intl.Segmenter が使えない環境では、コードポイント単位で数える
  return [...value].length
}

// countChars('\u{20BB7}野家') → 3   （value.length は 4）
// countChars('\u{1F468}‍\u{1F469}‍\u{1F467}')   → 1   （value.length は 8）

<script setup>
import { ref, computed } from 'vue'
import { countChars } from './utils/countChars'

const MAX = 100       // 上限（文字）
const WARN_AT = 10    // 残りがこの数以下になったら、注意を出す

const text = ref('')
const submitted = ref(false)

const count = computed(() => countChars(text.value))
const remaining = computed(() => MAX - count.value)
const isOver = computed(() => remaining.value < 0)
const isNear = computed(() => remaining.value >= 0 && remaining.value <= WARN_AT)

// 読み上げと表示の両方に使う文言（色だけに頼らない）
const message = computed(() => {
  if (isOver.value) return `${-remaining.value}文字オーバーしています。削ってください。`
  if (isNear.value) return `あと${remaining.value}文字です。`
  return ''
})

function onSubmit() {
  submitted.value = true
  if (isOver.value) {
    document.getElementById('bio')?.focus()
    return
  }
  // 送信する（サーバー側でも、必ず文字数を検証する）
  console.log('送信：', text.value)
}
</script>

<template>
  <form @submit.prevent="onSubmit">
    <label for="bio">自己紹介</label>

    <!-- v-model ではなく :value + @input：日本語の変換中も、カウンターを更新する -->
    <!-- maxlength は付けない：貼り付けが黙って切り捨てられるのを避け、超過を見せる -->
    <textarea
      id="bio"
      rows="4"
      :value="text"
      :aria-invalid="isOver"
      aria-describedby="bio-count bio-message"
      @input="text = $event.target.value"
    ></textarea>

    <p id="bio-count" class="counter" :class="{ near: isNear, over: isOver }">
      {{ count }} / {{ MAX }} 文字
    </p>

    <!-- 残りわずかのときと超過のときだけ、文言が入る（常に DOM に存在する） -->
    <p id="bio-message" role="status" class="message" :class="{ over: isOver }">
      {{ message }}
    </p>

    <!-- 超過しても、ボタンは無効にしない。送信時にエラーを示す -->
    <button type="submit">送信</button>
  </form>
</template>

<style scoped>
.counter { text-align: right; font-size: 0.9rem; }
.counter.near { color: #b26a00; font-weight: bold; }
.counter.over, .message.over { color: #c62828; font-weight: bold; }
textarea[aria-invalid="true"] { border-color: #c62828; }
</style>

// バイト数を数える（DB の列の制限などに合わせたいとき）
const bytes = new TextEncoder().encode(text).length

// UTF-8 の場合
//   'abc'   → 3 バイト
//   'あいう' → 9 バイト（日本語は 1 文字 3 バイト）
//   '\u{20BB7}'    → 4 バイト
//   '\u{1F600}'    → 4 バイト