Written by Kasumi

【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タグに入力された内容が文字数制限を超えたら任意の処理を実行する方法について紹介しました。

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

目次

関連記事

JavaScript

【JavaScript】同じ文字列を指定した回数繰り返して表示する方法

2023.01.24
1047
JavaScript

マウスでホバー出来る端末以外はCSSで装飾した:hoverを無効にする方法【メディアクエリで解決】

2022.12.27
5684
JavaScript

【JavaScript】コンストラクター関数を使ってオブジェクトの雛形を作成・インスタンス化する方法

2022.12.12
631
JavaScript

Swiperでスライドの幅を固定・中央寄せにする方法

2023.10.04
3067