input type=”number” の代わりの変換処理を実装する

inputタグのtype=”number”は入力内容を数値のみに制限することができますが、許容しない値だった場合にJavaScriptで値の取得ができない(取得する前に除去される)ので、例えば入力された値が全角数字だった場合にJavaScriptで半角数字に変換する、といった処理を追加することができません。
今回はtype=”number”の代わりに使用する想定で、JavaScriptで変換処理を実装してみます。

サンプルコード

type=”text”を使って実装します。
動作確認として、type=”number”も併せて配置しています。

<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に対して変換処理を追加します。

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行目を削除します。
変換処理のデモページ

半角数字以外の文字が含まれる場合に全削除ではなく、半角数字以外を削除したい場合は下記になります。

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;
}

変換処理のデモページ2