(Sample)

以下の例はテキストエリアの300文字数制限を300文字にして、そのことをメッセージで伝える例です。

300文字を超過した場合はメッセージを赤字にして注意喚起しています。

<!DOCTYPE html>
<html>
    <head>
        <title>word-count.html</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>
    <body>
        <textarea id="textarea" cols="30" rows="10"></textarea>
        <span id="message">残り300文字です</span>
        <script>

            const textarea = document.querySelector("#textarea");
            const message = document.querySelector("#message");
            const limit = 300;
            let remaining_length = 0;

            textarea.addEventListener("keyup", function () {
                remaining_length = limit - textarea.value.length;

                if (remaining_length > 0) {
                    message.textContent = `残り${remaining_length}文字です`;
                }else{
                    remaining_length *= -1;
                    message.textContent = `超過${remaining_length}文字です`;
                    message.style.color = "red";
                }
            });
        </script>
    </body>
</html>
Webアプリケーション制作のための小ネタ集　目次に戻る

テキストエリアに入力された文字数を数えたい　最後までお読みいただきありがとうございます。

研修のカリキュラムを見てみる