JavaScript PR

JavaScriptで文字数カウンターを作る方法

記事内に商品プロモーションを含む場合があります

今回は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
シラツキ
Web制作会社で働くフロントエンドエンジニア(コーダー)。 ココナラでもお仕事募集しております。 HTML,CSS,JS,WordPress,EC-CUBE,Next.jsなど制作に役立つ情報を発信していきます。 webサイトの運営、修正、制作などお仕事も募集中! お気軽にご相談ください。