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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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の要素のテキストに０を表示させ、送信ボタンにdisabledをtrueにし、属性として付与しています。

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

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

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