JavaScriptで文字数カウントとリセットを行う方法
カテゴリ：WEB制作
制作においてフォームの最適化に入力フォームの文字数をカウントできるようにさせたいというケースがあります。
今回はjavaScriptでリアルタイムで文字数を取得、加えて入力内容をリセットするボタンを設置する方法を紹介します。
コードを紹介
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>文字数カウント</title>
<style>
textarea {
width: 100%;
height: 100px;
margin-bottom: 10px;
}
ul {
list-style: none;
padding: 0;
}
li {
margin-bottom: 10px;
}
</style>
</head>
<body>
<textarea placeholder="ここにテキストを貼り付けてください。"></textarea>
<ul>
<li>
<button id="reset">リセット</button>
</li>
</ul>
<ul>
<li><span>0</span>文字</li>
</ul>
<script>
document.addEventListener("DOMContentLoaded", function () {
const textarea = document.querySelector("textarea");
const charCountSpan = document.querySelector("ul li span");
const resetButton = document.getElementById("reset");
let hasInput = false;
textarea.addEventListener("input", function () {
const textLength = textarea.value.length;
charCountSpan.textContent = textLength;
hasInput = textLength > 0;
});
resetButton.addEventListener("click", function () {
textarea.value = "";
charCountSpan.textContent = 0;
hasInput = false;
});
window.addEventListener("beforeunload", function (event) {
if (hasInput) {
event.preventDefault();
event.returnValue = "";
}
});
});
</script>
</body>
</html>
コードを解説
読み込みが完了してから実行します。
document.addEventListener("DOMContentLoaded", function () {
});
テキストエリアを取得します。
const textarea = document.querySelector("textarea");
文字数の出力先を指定します。
const charCountSpan = document.querySelector("ul li span");
リセットボタンを取得します。
const resetButton = document.getElementById("reset");
入力フォームの状態を監視するために変数を作成してfalseを挿入しておきます。
let hasInput = false;
テキストエリアでテキストが入力されたら実行します。
textarea.addEventListener("input", function () {
});
『.value.length』で文字数を取得します。
const textLength = textarea.value.length;
『.textContent』で文字数をHTMLに出力します。
charCountSpan.textContent = textLength;
入力がある場合は入力フォームの状態を監視するために作った変数に『true』を入れます。
hasInput = textLength > 0;
リセットボタンがクリックされたときの処理を書いていきます。
resetButton.addEventListener("click", function () {
});
『.value』でテキスト内容を空の値に書き換えます。
textarea.value = "";
出力した文字数を0にリセットします。
charCountSpan.textContent = 0;
入力フォームの状態を監視するために作った変数に『false』を入れます。
これで初期状態に戻ります。
入力値がある場合はページを移動する際やブラウザを閉じる際に確認ダイアログを表示する場合もありますのでその場合の処理を書きます。
window.addEventListener("beforeunload", function (event) {
});
入力値がある場合のみ実行します。
if (hasInput) {
}
デフォルト動作をキャンセルし、確認ダイアログを表示します。
event.preventDefault(); event.returnValue = "";
まとめ
以上、『javaScriptで文字数カウントとリセットを行う方法』でした。
フォームのユーザービリティ向上で使うこともありますのでぜひ参考にしてください。
