勉強したことのメモ

Webエンジニア / プログラマが勉強したことのメモ。

「input type="number"」のテキストボックスを桁数制限且つ半角数値のみ入力可にする方法

  jQuery JavaScript

「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 JavaScript

  関連記事

サムネイルをクリックすると拡大画像を表示できる「Lightbox」の利用方法

画像をサムネイル表示してクリックしたら大きく表示する というのがLightbox ...

jQueryで画像が存在すれば表示、なければノーイメージ画像を表示

やりたかった事は以下の通り。 ・画像のURLはcode.jpgみたいになってる ...

「display: block !important;」指定された要素をjQueryで非表示にする方法

jQueryで特定の要素を非表示にしたかったのでhide()を使用したところ非表 ...

jQueryでformの各種パーツ(テキストボックス等)の操作まとめ

jQueryでフォームのセレクトメニューやラジオボタン等、各種パーツを操作するこ ...

FullCalendarでカレンダー内のイベントをクリックした際にタイトル以外の内容も表示させる方法

FullCalendarでカレンダー内のイベントをクリックした際にtitle以外 ...