【JavaScript】textareaで文字数制限をする方法を解説!

JavaScriptを用いたtextareaで文字数制限をする方法を解説します。ここではHTML、JavaScript、jQueryの三種類を用いて文字数制限を設け、文字数を超えるとユーザーに修正させるようにしたいと思います。

コンテンツ [表示]

  1. 1textareaで文字数制限をしたい
  2. 2textareaで文字数制限をする方法
  3. 2.1HTML
  4. 2.2JavaScript
  5. 2.3jQuery
  6. 3まとめ

textareaで文字数制限をしたい

フォームのtextareaなどでよく文字数制限を設けているのを見かけます。
そして自分でフォームを作るときにも、長すぎると困るので、字数制限を設けたい思うことがよくあるでしょう。

そんな時に字数制限をする方法について、HTML、JavaScript、jQueryの三種類を用いて実現する方法をお伝えします。

Photo byStockSnap

textareaで文字数制限をする方法

それではtextareaで文字数制限をする方法としてHTML、JavaScript、jQueryの三種類の方法をそれぞれ見ていきましょう。

HTML

HTMLを用いてtextareaで文字数制限をする方法はとても簡単です。

それはmaxlength属性で文字数を設定してあげるだけです。

ここではmaxlength="30"として設定しています。それではサンプルコードを用いて、実際に挙動を見てみましょう。

試しに30文字以上テキストボックスに文字を書いてみてください。

このように30文字以上書くと勝手に30文字以内に文字がカットされます。

JavaScript

HTMLで行った方法では、30文字を超える文章をテキストボックスに書くと、勝手に30文字以内にカットされるため、書きたい内容があったが何を書きたかったのか忘れてしまったなんてことがあると思います。

JavaScriptでは30文字を超えると注意を促して、30文字以内にユーザーにまとめてもらうという方法を解説します。

またこの際30文字を超えると送信ボタンを押せないという設定にします。

ではまずサンプルコードと挙動を見てみましょう。その後にコードの解説をします。

ためしにテキストボックスに30文字以上書いてみましょう。

このように30文字を超えるとアラートでメッセージが表示され、送信ボタンを押せなくなることが分かります。

それでは簡単にJavaScriptのコードの解説をします。

addEventListenerの第一引数のkeyupはキーボードをタップしたらイベントを発生させることを意味しています。

そしてその関数の中で、e.target.valueでテキストボックスの中の文章を取得し、それぞれ30文字を超えた場合と30文字以内の場合を記述しています。

jQuery

jQueryではJavaScriptに加えて、文字数カウントを設定してみます。

まずはサンプルコードで挙動を見てみましょう。

その後に簡単ではありますが、コード解説します。

今回はためしにテキストボックスに30文字以上書いてみましょう。

このように文字がカウントされていき、文字カウントが0になると送信ボタンを押せなくなることが分かります。

では簡単にjQueryのコードの解説をします。

まずonメソッドを用いてtextareaに内容が追加され、keydown、keyup、keypress、changeされたときにイベントを発生するように設定します。

次にcount変数にtextareaのなかの文字数を設定します。
またlimit変数で最大文字数ーcountを設定します。

そしてlimitが30以下の時、idがnumの要素のテキストにlimitを表示させ、送信ボタンのdisabled属性はfalseにして取り除き、limitが0になると、idがnumの要素のテキストに0を表示させ、送信ボタンにdisabledをtrueにし、属性として付与しています。

まとめ

いかがでしたでしょうか?

textareaに文字数制限を設けることで悪意のあるユーザーから守ったり、受け取る情報を制限することができます。もちろん完璧な対処法ではないですが、やったほうがセキュリティリスクは下がります。

簡単に利用できて、とても便利な機能なので、ぜひ使ってみてください。

今だけ
無料

【5月31日まで】全カリキュラム無料で提供中!

Qumeru

Qumeru[クメル]ではプログラミング学習が出来るカリキュラムを5月31日までの期間限定で無料で提供しています。

無料登録することで、すぐにプログラミング学習を始められます。ぜひカリキュラムをお試し下さい!

関連記事

【期間限定】全カリキュラム無料で提供中!

Qumeru[クメル]ではプログラミング学習の全カリキュラムを5月31日まで期間限定で無料で提供しています。

無料登録することで、すぐにプログラミング学習を始められます。ぜひお試し下さい!

目次