IpadOSのsafariにおけるinput type="number"で数字のみ入力させたい(入力制限)

Question

お世話になります。
タイトルについて、なにかいいアイデアがあれば教えていただきたいです。

現在の状況

type="number"が指定してあるクラスをページ内から取得し、そのクラス内でキーボードから入力された値が数字以外であれば、値を一つ前の情報に戻す処理を行う。という処理を実現したいのですが、うまく動いていないです。コードは下記です。

document.addEventListener('DOMContentLoaded', function() {
	const inputTypeNumberDoc = document.querySelectorAll("input[type='number']");
		inputTypeNumberDoc.forEach((matche) => {
			matche.addEventListener('keydown',e => {
				const val = matche.value;
				console.log("eCode:"+e.code);
				if(!((e.code=="Digit1")&&(e.code==="Backspace")&&(e.code=="Digit2")&&(e.code=="Digit3")&&(e.code=="Digit4")&&(e.code=="Digit5")&&(e.code=="Digit6")&&(e.code=="Digit7")&&(e.code=="Digit8")&&(e.code=="Digit9")&&(e.code=="Digit0")&&(e.key==1)&&(e.key==2)&&(e.key==3)&&(e.key==4)&&(e.key==5)&&(e.key==6)&&(e.key==7)&&(e.key==8)&&(e.key==9)&&(e.key==0))){
					setTimeout(() => {
						if(!( (e.code==="Backspace")||(e.key=='1')||(e.key=='2')||(e.key=='3')||(e.key=='4')||(e.key=='5')||(e.key=='6')||(e.key=='7')||(e.key=='8')||(e.key=='9')||(e.key=='0') )){
									matche.value=val;	
							}
						})
				}else{
						setTimeout(() => {
							matche.value=val;	
							})
					}
				});
			});
		});

<div class="col-md-3 col-lg-4">
  <input type="number" class="form-control form-control-lg inputTypeNumberDoc" id="capacity" name="capacity" value="">
 </div>
input　type="number"がページ内に複数あります。

コード内にある"digit"はe.codeを用いて数字を出力すると、その値になっています。

ナレッジの共有

数字以外の値(-マイナス)などを入力し、hoge.valueで出力しようとすると値はnullが返ってきます。↓
__
入力した値{ 1-112-2}
hoge.valueを用いて出力した値{""}
__

e.keyやe.codeを用いて今回は実現できないだろうか...

・試したこと

下記ページと同じものを実装したがsafariでは挙動がおかしく適切な実装ができなかった。
(chromeでは正しく機能しました。)
input type="number" ハイフン除去サンプル

意外と知られていないtype="number"入力欄の5つの問題点

---

input要素のpattern属性を利用し制限をかけようとしたが、safariではpatten属性は利用できないみたいでした。
pattern属性について

---

以上になります。よろしくお願いいたします。

Comments

[int32_t]

> うまく動いていないです

現在のコードでは具体的にどういう動作をするのでしょうか。

[teratail-boy]

ごめんなさい、DOMを読み込む処理を書いていませんでした。
具体的にはinput要素に数字以外の入力をした場合は、その文字が入力された後に入力前の情報をinputに代入するといった動作をしています。
コード修正いたしました。いかがでしょうか？

[int32_t]

> その文字が入力された後に入力前の情報をinputに代入するといった動作をしています。

それは、実現したい動作では？
現在のコードでどういう不具合があるのかを聞いています。

[teratail-boy]

>input要素に数字以外の入力をした場合は、その文字が入力された後に入力前の情報をinputに代入するといった動作をしています。

PC環境のchromeでは上記の動きをするのですが、
ipadのsafariでは数字以外の文字を入力しても入力前の値が代入されません。ですが、２回数字以外の同じ文字を入力するとその文字が代入されます。
＿＿例＿＿
入力1回目："1"　input内出力結果1:"1" →
入力2回目:"-" 　input内出力結果2:"1-" →
入力三回目:"-" input内出力結果3:"-"
___
上記のように動いてしまう状況で...

Answer 1

追記：ソフトウェアキーボードを使ったほうがいいかもしれないですね...
自分は導入しました。ほかに解決方法あればご教授お願い致します。

Answer 2

お世話になります。
回答ありがとうございました。

回答通りに直したところ、ipad上のキーボード設定でEnglishの時のみ数字の入力制限をすることができました。

全角入力については現在できていない状況なので、調査してみたいと思います。
コードについては以下のように直しました。検証途中なので各所にalert文が入っていますが了承ください。

ありがとうございました！

document.addEventListener('DOMContentLoaded', function() {
	const inputTypeNumberDoc = document.querySelectorAll("input[type='number']");
		inputTypeNumberDoc.forEach((matche) => {
			matche.addEventListener('keydown',e => {
				const val = matche.value;
				var eCodeVal=e.code;
				console.log("eCode:"+eCodeVal);
				var eKeyVal=e.key;
				console.log("ekey:"+eKeyVal);
				//alert("keydown処理開始,value:"+val+"ecode:"+eCodeVal+"ekey"+eKeyVal);
				//value="" ecode=KyeA eKye=a
					if(e.isComposing){
						e.preventDefault();
						//alert("isComposing開始,value:"+val+"ecode:"+eCodeVal+"ekey"+eKeyVal);
					}else{
						//alert("else文開始,value:"+val+"ecode:"+eCodeVal+"ekey"+eKeyVal);
						//value="" ecode:KeyA ekey:a
						if(((eCodeVal=="Digit1")||(eCodeVal==="Backspace")||(eCodeVal=="Digit2")||(eCodeVal=="Digit3")||(eCodeVal=="Digit4")||(eCodeVal=="Digit5")||(eCodeVal=="Digit6")||(eCodeVal=="Digit7")||(eCodeVal=="Digit8")||(eCodeVal=="Digit9")||(eCodeVal=="Digit0")||(eKeyVal==1)||(eKeyVal==2)||(eKeyVal==3)||(eKeyVal==4)||(eKeyVal==5)||(eKeyVal==6)||(eKeyVal==7)||(eKeyVal==8)||(eKeyVal==9)||(eKeyVal==0))){
							if((eCodeVal==="Backspace")|| (eKeyVal==1)||(eKeyVal==2)||(eKeyVal==3)||(eKeyVal==4)||(eKeyVal==5)||(eKeyVal==6)||(eKeyVal==7)||(eKeyVal==8)||(eKeyVal==9)||(eKeyVal==0) ){
								//console.log("成功");
							//alert("成功,value:"+val+"ecode:"+eCodeVal+"ekey"+eKeyVal);
							}else{
							e.preventDefault();
							//alert("消去,value:"+val+"ecode:"+eCodeVal+"ekey"+eKeyVal);
							}
						
						}else{	
								//alert("最後のELSE,value:"+val+"ecode:"+eCodeVal+"ekey"+eKeyVal);
								//value="" ecode:KeyA ekey:a
								e.preventDefault();	
						}
					}
				});
				//matche.addEventListener( "compositionend", compostionFn);
			});
		});

var compostionFn = function ( event ) {
	//alert("eventData:"+event.data);
	const paragraph = event.data;
	const regex = /[0-9]/g;
	const found = paragraph.match(regex);
	if(found==null){
		event.data="";
	}
	//alert("処理後：event.data:"+event.data+"found:"+found);
}

Answer 3

現象を確認していませんのであてずっぽで回答を書いてみます。

• setTimeout() のコールバック内で e.code と e.key を参照していますが、このタイミングで e が指すイベントオブジェクトがイベント発生時と同じ値を保持しているとは限らない気がします。e.code と e.key をローカル変数にコピーしてから参照してみたらどうでしょうか。

• 「禁止文字が来たら入力完了後に前の値を書き戻す」よりは「禁止文字が来たら e.preventDefault() で入力をキャンセルする」のほうが素直な気がします。

if(!((e.code=="Digit1")&&(e.code==="Backspace")&& ...

「e.code が Digit1 かつ Backspace」になることはあり得ないので、この if は常に成り立ちます。