inputタグのtype=”number”は入力内容を数値のみに制限することができますが、許容しない値だった場合にJavaScriptで値の取得ができない(取得する前に除去される)ので、例えば入力された値が全角数字だった場合にJavaScriptで半角数字に変換する、といった処理を追加することができません。
今回はtype=”number”の代わりに使用する想定で、JavaScriptで変換処理を実装してみます。
サンプルコード
type=”text”を使って実装します。
動作確認として、type=”number”も併せて配置しています。
1 2 3 4 5 | <p>type=number</p><input type="number" class="input-number"><p>type=textのカスタマイズ</p><input type="text" class="js-input-number" inputmode="numeric"> |
.js-input-numberに対して変換処理を追加します。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | const inputNumbers = document.querySelectorAll('.js-input-number');for (const inputNumber of inputNumbers) { inputNumber.addEventListener('input', convert_input_number);}function convert_input_number(e) { let val = this.value; // 全角数字を半角数字に変換 val = val.replace(/[０-９]/g, function(s) { return '０１２３４５６７８９'.indexOf(s); }); // 半角数字以外が含まれる場合は空にする if(val.match(/[^0-9]/)) val = ''; this.value = val;} |
コメントに記載している通りですが、全角数字を半角数字に変換した後に、半角数字以外の文字が含まれる場合は入力値を削除しています。
もし全角数字も許容しないようにする場合は、9〜12行目を削除します。
変換処理のデモページ
半角数字以外の文字が含まれる場合に全削除ではなく、半角数字以外を削除したい場合は下記になります。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | const inputNumbers = document.querySelectorAll('.js-input-number');for (const inputNumber of inputNumbers) { inputNumber.addEventListener('input', convert_input_number);}function convert_input_number(e) { let val = this.value; // 全角数字を半角数字に変換 val = val.replace(/[０-９]/g, function(s) { return '０１２３４５６７８９'.indexOf(s); }); // 半角数字以外を除去 val = val.replace(/[^0-9]/g, ''); this.value = val;} |
コメントが承認されるまで時間がかかります。