textareaやinputの入力文字数制限をJavaScriptで実装する

2023/12/01 著者:牧野健人

textareaやinputに入力される文字数をJavaScriptで制限する方法を解説します。コードはコピペOKなので、ご活用ください。

株式会社リラクス代表取締役。CRO・SEOを専門とし、デザイン・実装のスキルも活かしながら、クライアントの成果向上のための取組に尽力。
慶應義塾大学卒業後、行政機関を経て、デジタルマーケティングエージェンシーのアイレップにて運用型広告のクリエイティブプランニングに従事。2019年にリラクスを創業。

お問い合わせはフォームよりお願いいたします。

入力文字数をJavaScriptで制限するデモ
- textarea
- input
入力文字数を制限するためコード

入力文字数をJavaScriptで制限するデモ

まずはデモをtextareaとinputの2パターンで掲載します。

textarea

残りの文字数：50

input

残りの文字数：50

入力文字数を制限するためコード

以下で文字数制限を実装するためのHTML、CSS、JavaScriptを紹介します。

HTML

入力欄であるtextareaと、残りの文字数を表示するpを記述します。

<textarea id="entered-characters" oninput="limitTextLength();"></textarea>
<p>残りの文字数：<span id="remaining-characters">50</span></p>

textareaではなくinputを使う場合は下記のようにします。

<input type="text" id="entered-characters" oninput="limitTextLength();">
<p>残りの文字数：<span id="remaining-characters">50</span></p>

CSS

CSSには残りの文字数が0になったときに表記を赤くするための記述をしておきます。

その他のデザイン的な調整は任意でおこなってください。

#remaining-characters.max {
  color: #dd3535;
}

JavaScript

let maxLength = 50;が文字数の上限なので、任意の数値に変更してください。

const limitTextLength = () => {
  let maxLength = 50; // 文字数の上限
  let enteredCharacters = document.getElementById('entered-characters');
  let remainingCharacters = document.getElementById('remaining-characters');

  if (enteredCharacters.value.length > maxLength) {
    enteredCharacters.value = enteredCharacters.value.substr(0, maxLength);
    remainingCharacters.classList.add('max');
  } else {
    remainingCharacters.classList.remove('max');
  }

  remainingCharacters.textContent = maxLength - enteredCharacters.value.length;
};