こんにちは。
ゆうや（@yuyaphotograph）です！
本記事では、jQueryでテキストエリアの文字数制限をして送信ボタンを押せなくする方法をご紹介します。
身近な例をあげると、Twitterのツイート画面が分かりやすいと思います。
・初期表示ではツイートボタンは押せない
・一文字でも入力すると押せるようになる
・140字という文字制限を超えると再び押せなくなる
よく見てみると上記のような動作をしていますよね(^o^)
それでは作り方を見ていきましょう！
テキストエリアの文字数制限をして送信ボタンを押せなくしてみよう！
実装イメージ
画像を２枚使って実装イメージを共有します。
ボタン押せない状態
送信ボタンがかすかに薄くなっているのが確認できますね
ボタン押せる状態
１文字でも入力すると押せるようになります
実装のポイント
今回の実装のポイントは、
- 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^)
最後までご高覧いただきありがとうございました！
