【jQuery】テキストエリアの文字数制限をして送信ボタンを押せなくする方法

jQueryでテキストエリアの文字数制限をして送信ボタンを押せなくする方法

こんにちは。

ゆうや(@yuyaphotograph)です!

本記事では、jQueryでテキストエリアの文字数制限をして送信ボタンを押せなくする方法をご紹介します。

身近な例をあげると、Twitterのツイート画面が分かりやすいと思います。

・初期表示ではツイートボタンは押せない

・一文字でも入力すると押せるようになる

・140字という文字制限を超えると再び押せなくなる

よく見てみると上記のような動作をしていますよね(^o^)

それでは作り方を見ていきましょう!

テキストエリアの文字数制限をして送信ボタンを押せなくしてみよう!

実装イメージ

画像を2枚使って実装イメージを共有します。

ボタン押せない状態

jqueryで文字数制限

送信ボタンがかすかに薄くなっているのが確認できますね

ボタン押せる状態

jqueryで文字数制限サンプル

1文字でも入力すると押せるようになります

実装のポイント

今回の実装のポイントは、

  • valメソッドとlengthプロパティを使用してテキストエリアの文字数を取得する
  • 文字数が0もしくは、指定の文字数(今回は30文字)を超えていたらpropメソッドでボタンを押せなく(disabled trueに)する
  • keydownイベントなどでユーザーの入力動作をチェックする

となります。

ソースコードとともに確認していきましょう。

テキストエリアと送信ボタンのHTML(だいぶ省略ver)

index.html
<textarea class="Textarea"></textarea>
<input type="submit" class="Btn">

formタグなどは省略してます。

初期表示でボタンを押せなくする

script.js
if($('.Textarea').val().length == 0){
  $('.Btn').prop('disabled', true);
}

初期表示は文字数0なので上記のような書き方になりやす。

ユーザーの入力した文字数に応じてボタンを押せなくする

script.js
$('.Textarea').on('keydown keyup keypress change', function(){
  if($(this).val().length == 0){
    $('.Btn').prop('disabled', true);
  } else if($(this).val().length > 30) {
    $('.Btn').prop('disabled', true);
  } else {
    $('.Btn').prop('disabled', false);
  }
});

propメソッドは、

prop(“属性”, 値)のように使用します(^o^)

サンプルコード

CodePenでサンプルを作ったのでご覧になって下さいまし(^o^)

↓↓↓

See the Pen
dyPZWMe
by 石森裕也 (@yuyaphotograph)
on CodePen.

まとめ

以上、jQueryでテキストエリアの文字数制限をして送信ボタンを押せなくする方法をご紹介しました。

Vueでの文字数制限も興味あるので今月中に調べて記事書きます(^o^)

最後までご高覧いただきありがとうございました!

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です