JavaScript | テキストエリアで入力可能な残り文字数を表示する方法
JavaScriptを使ってテキストエリアでの入力可能な文字数と残り文字数をリアルタイムに表示する方法を紹介しています。
テキストエリアで入力可能な残り文字数を表示
テキストエリアで入力可能な残り文字数を表示する動作サンプルとJavaScriptのサンプルコードです。
文字の入力毎にリアルタイムで反映します。
英字、半角・全角記号、日本語も一文字として数え、また改行も一文字としてカウントします。
See the Pen JavaScript WASD and arrow key input events by yochans (@yochans) on CodePen.
HTMLにはid名を指定したtextareaと、残り文字数を表示する用のpタグを利用しています。
ページ内で複数のテキストエリアを含めない場合、textareaのidは不要です。
<p id="word-count">残り200文字</p>
<textarea id="textarea"></textarea>テキストエリア内の書き換えをトリガーにしたイベントを実装しています。
サンプルでは変更の検出にaddEventListenerでkeyupを指定して利用。
ページ内にテキストエリアがひとつだけの場合はid指定の`#textarea`ではなく`textarea`と指定しても問題ありません。
value.lengthで現在の文字数を取得して、それを最大文字数から引いた値をテキストとしてpタグに出力しています。
document.querySelector(`#textarea`).addEventListener(`keyup`, function () {
document.querySelector(`#word-count`).textContent = `残り${200 - document.querySelector(`#textarea`).value.length}文字`;
})アロー関数バージョンです。
document.querySelector(`#textarea`).addEventListener(`keyup`, () => {
document.querySelector(`#word-count`).textContent = `残り${200 - document.querySelector(`#textarea`).value.length}文字`;
})