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

JavaScriptでtextareaの文字数制限をする方法を紹介いたします。

textareaが以下のような内容の場合を想定して示します。

<form name="form">
<textarea id="textarea" name="kamo" cols="10" rows="10" placeholder="制限：10文字以内"></textarea>
<input type="submit" id="button" value="送信">
</form>

</form>

textareaに入力があるたびに1文字ずつチェックが走り、文字数を確認します。

チェックの結果、10文字以内の場合には送信ボタンが有効化され、10文字以上の場合はボタンが無効化されて押せなくなります。

textarea = document.getElementById('textarea');
btn = document.getElementById('button');

textarea.addEventListener('keyup', (e) => {
  if (e.target.value.length > 10) {
    alert("10文字以内で入力してください。");
    btn.disabled = true;
  };
  if (e.target.value.length <= 10) {
    btn.disabled = false;
  };
});

textarea = document.getElementById('textarea');

btn = document.getElementById('button');

textarea.addEventListener('keyup', (e) => {

if (e.target.value.length > 10) {

alert("10文字以内で入力してください。");

btn.disabled = true;

};

if (e.target.value.length <= 10) {

btn.disabled = false;

};

});