[jQueryプラグイン] 増減ボタン付きの数値のみ入力可能テキストボックス

実際のプラグインの表示デモ

数値の入力方法は、増減ボタン、上下矢印キー、マウスホイール回転(※)、直接キーボード入力、右クリックメニュの貼り付け、の5つです。増減ボタン、上下矢印キーを長押ししたときは、押している間は数値が変化し続けます。この辺は<input type="number">要素と同じように作っています。

※…Microsoft Edgeのみマウスホイール回転での数値入力に対応していません。

特徴

• 数値と先頭のマイナス記号以外は入力できないようになっています。(※)
• フォーカスが外れた時に値のチェックが行われ、空文字もしくは数値として認識できる文字列に変換されます。
• 数値の上限、下限、増加値、デフォルト値、初期値を設定できます。
• 空文字の許可/不許可を指定できます。
• 増減ボタンが大きく、押しやすくなっています。
• JavaScriptで値を取得するとき、数値型(もしくはnull)で返すので、別途値チェックや型変換を行う必要がありません。
• 値が変化したときのイベント設定を行うことができます。

※…IMEを無効にできるWEBブラウザは数値以外のキー入力を無視します。IMEを無効にできないWEBブラウザ(Google Chrome)は、半角モードでの入力のときは数値以外のキー入力を無視しますが、全角モードで入力を行ったときは数値以外の文字入力もできてしまいます。その場合も、フォーカスが外れたときに値のチェックが行われます。このとき、全角数値は半角数値に変換されます。

動作確認済みWEBブラウザ

以下のWEBブラウザで正しく動作することを確認しております。Microsoft EdgeとGoogle Chromeは一部機能の制限があります。詳細は「実際のプラグインの表示デモ」と「特徴」の項目を確認下さい。

• Internet Explorer 11
• Google Chrome 75
• Firefox 67
• Microsoft Edge 44

ダウンロード

jQuery.numInput ver1.0.0

ライセンス : GPL v3

Download

使用方法

▼最初にJavaScriptファイルとCSSファイルを読み込みます。jQueryプラグインですので、jQueryスクリプトファイルを最初に読み込む必要があります。読み込むファイルが増えるのが嫌な方は、ファイルの中身をコピーして別に読み込むファイルの末尾にペーストしてあげてもかまいません。

<script src="(jQueryスクリプトファイルのパス)"></script>
<script src="jquery.numInput.js"></script>
<link rel="stylesheet" href="jquery.numInput.css">

▼jQueryオブジェクトの、numInput()メソッドを実行します。オプションを設定する場合は、メソッドの第1引数にオブジェクトリテラルを渡します。オプションについては後述。これで、<input>要素が数値入力用として機能するようになります。

<input id="nt_1">
<input id="nt_2">
$(function(){
	$('#nt_1').numInput();
	$('#nt_2').numInput({min:10, max:50, allowEmpty:true});
});

▼JavaScriptで現在の値を取得するにはnumInput()メソッドの第1引数に文字列'get'を指定します。戻り値は、整数型で返されます。現在値が空文字の場合はnullが返されます。

let value = $(セレクタ).numInput('get');

▼JavaScriptで値を設定するにはnumInput()メソッドの第1引数に文字列で'set'を、第2引数に値を指定します。値には、数値、文字列、nullが指定可能です。数値として変換できない文字を指定した場合は、デフォルト値、もしくは空文字が設定されます。

// OK
$(セレクタ).numInput('set', 6);
$(セレクタ).numInput('set', '-10');
$(セレクタ).numInput('set', '２０');
$(セレクタ).numInput('set', null);
// NG
$(セレクタ).numInput('set', 'abc');

オプション

設定可能なオプション項目です。数値範囲の制限やイベントの設定が可能です。

サンプル / デモ

▼初期値5で、-10から10の範囲で指定可能な入力欄

<input id="sample_1">
$('#sample_1').numInput({min:-10, max:10, value:5});

▼空を許可し、5ずつ変化する入力欄

<input id="sample_2">
$('#sample_2').numInput({allowEmpty:true, step:5});

▼数値が変化したときに任意の関数を実行する入力欄

<input id="sample_3">
$('#sample_3').numInput({valueChanged:function(e){ console.log('value changed to ' + e.value); }});