「input type="number"」のテキストボックスを桁数制限且つ半角数値のみ入力可にする方法
「input type="number"」のテキストボックスに対して「2桁まで」等の桁数制限を行いつつ、半角数値のみ入力可に制限したかった。JavaScriptで半角数値のみというのは過去記事でも書いたが、桁数制限は対応したことがなかったと思うので以下に対応方法をメモ。
対応方法
ソースコード
<input type="number" class="number">
<script type="text/javascript" src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script>
$(function() {
    $(`.number`).on(`input`, function(){
        $(this).val($(this).val().replace(/[^0-9]/g, ''));
        $(this).val($(this).val().slice(0, 5));
    });
});
</script>
解説等
半角数値以外を入力した場合は空に置換し、sliceで5桁までを返すという形になる。
リファレンス
slice
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/slice
関連記事
- 
					
													  
- 
					jQueryで対象の要素をまとめて親要素で囲む方法あるシステムで出力されているHTMLタグを指定した親要素で囲みたいというケースが ... 
- 
					
													  
- 
					jQueryにて複数のajax処理のレスポンスをまとめて表示する方法同時にajax処理を行う際、挙動やコードの書き方に悩まされることが多い。例えばA ... 
- 
					
													  
- 
					jQuery Nice Selectを特定ページのみ無効にする方法bootstrap系のテンプレートデザインを使用したサイトを構築中に、セレクトメ ... 
- 
					
													  
- 
					jquery.cookie.jsで「$.cookie is not a function」エラーフロントエンド側でCookieを利用したい場合jquery-cookieを用いる ... 
- 
					
													  
- 
					jQueryで要素を移動する方法のまとめjQueryで要素を移動する際、insertBefore / insertAft ...