今回はJavaScritを使用して、文字数カウンターを作る方法を紹介します。
最低限の機能だけを実装します。
JavaScriptで文字数カウンターを作る
では早速、JavaScriptで文字数カウンターを作っていきます。
カウンター用のHTMLを用意する
まずは、カウンターの入力欄と文字数を表示するHTMLを書いていきます。
<input id="input" type="text"> <p><span id="count">0</span>文字</p>
文字数をカウントするためのJavaScript
下記が入力した文字数をカウントするためのコードです。
入力内容が変更するたびに実行され、リアルタイムで変更が反映されます。
使う場面としては、フォームの入力制限などを設けている場合などに使用できるかと思います。
const inputArea = document.querySelector('#input'); const textCount = document.querySelector('#count'); inputArea.addEventListener('keyup', onchange); function onchange() { const inputText = inputArea.value; textCount.innerHTML = Array.from(inputText).length; }
「Array.from()」という部分は、絵文字が使われたときの対策になります。
こちらを入力しない場合、絵文字が入力されると2文字扱いになってしまいます。
「Array.from()」を使用することで、意図しないカウントを回避することができます。
ABOUT ME