• JavaScript

【JavaScript】inputの文字数制限を超えたら任意の処理を実行する方法

JavaScriptでinputタグに入力された内容が文字数制限を超えたら任意の処理を実行したい。

本記事ではこのような悩みを解決します。

実装サンプル

See the Pen
inputの文字数制限を超えたら任意の処理を実行する by Kohei (@kouk05)
on CodePen.0

実装サンプルです。

inputの入力フォームに7文字以上入力したら、アラートを出す処理をJavaScriptで実装してます。

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

HTMLのinputにonKeyUp属性を付与

<input type="text" maxlength="7" placeholder="入力してください。" onKeyUp="limit(this)">

まず最初にHTMLのinput要素にonKeyUp属性を付与します。

onKeyUp属性はinputの入力フィールドからキーを離した際にJavaScriptの関数が実行されます。

本記事では例としてonKeyUp属性の値に次章で定義するlimit関数を入れてます。

引数にthisを指定する事で、付与した属性のHTML要素をJavaScript側で参照できます。

文字数制限を超えたら任意の処理を実行

function limit(i) {
  if (i.value.length >= 7) {
    alert('文字数制限を超えました。')
  }
}

文字数制限を超えたら任意の処理を実行するコード例です。

前章でonKeyUp属性の値に入れた関数を定義。

引数.value.lengthでinputに入力された文字数をカウント。

上記文字数が制限（コード例では7文字）を超えたらという条件式をif文で定義。

if文内で任意の実行処理を記述します。

以上で実装完了です。

まとめ

JavaScriptでinputタグに入力された内容が文字数制限を超えたら任意の処理を実行する方法について紹介しました。

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