<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>コンマ区切り</title> </head> <body> <input type="text" id="numberInput" placeholder="数字を入力してください"> <script> const input = document.getElementById('numberInput'); input.addEventListener('input', () => { let value = input.value.replace(/,/g, ''); // コンマを削除 if (!isNaN(value) && value !== '') { value = Number(value).toLocaleString(); // コンマ区切りを適用 input.value = value; // テキストボックス内の値を更新 } }); </script> </body> </html>
複数のテキストボックスに同じ処理を適用するには
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>コンマ区切り</title> </head> <body> <input type="text" class="numberInput" placeholder="数字を入力してください"> <input type="text" class="numberInput" placeholder="数字を入力してください"> <input type="text" class="numberInput" placeholder="数字を入力してください"> <script> // クラス名で全ての対象テキストボックスを取得 const inputs = document.querySelectorAll('.numberInput'); inputs.forEach(input => { input.addEventListener('input', () => { let value = input.value.replace(/,/g, ''); // コンマを削除 if (!isNaN(value) && value !== '') { value = Number(value).toLocaleString(); // コンマ区切りを適用 input.value = value; // テキストボックス内の値を更新 } }); }); </script> </body> </html>
toLocaleString() は JavaScript のメソッドで、文字通り「ロケール（地域や言語の設定）に基づいて」数字や日付などをフォーマットするために作られています。
具体的には、数字をそのロケール（例えば、日本やアメリカなど）に応じた形式で整形します。コンマ区切りはその一部です。