[JS]フォームの入力値を数字や整数のみに制御できるjQuerysプラグイン「jQuery Plugin – Numeric」｜jQueryプラグイン・ライブラリ

[JS]フォームの入力値を数字や整数のみに制御できるjQuerysプラグイン「jQuery Plugin – Numeric」

jQueryプラグイン・ライブラリ Javascript・jQuery

jQuery Plugin – Numeric

スポンサード

メールフォームなどテキストボックスへ文字を入力する際に、半角数字のみに制限してくれるjQueryプラグイン「jQuery Plugin – Numeric」のご紹介です。

jQuery Plugin – Numeric のダウンロード

以下のページよりjquery.numeric.min.jsのファイルをダウンロードします。

jQuery Plugin – Numeric

jQuery Plugin – Numericによる入力値制御

ダウンロードしたjquery.numeric.min.jsをjquery.minファイルと一緒に<head>内に読み込ませます。

<script type="text/javascript" src="./jquery.min.js"></script>
<script type="text/javascript" src="./jquery.numeric.min.js"></script>
<script type="text/javascript">
// 数値
$(".numeric").numeric();

// 整数:
$(".integer").numeric(false, function() { alert("Integers only"); this.value = ""; this.focus(); });

// 正数
$(".positive").numeric({ negative: false }, function() { alert("No negative values"); this.value = ""; this.focus(); });

// 正の整数
$(".positive-integer").numeric({ decimal: false, negative: false }, function() { alert("Positive integers only"); this.value = ""; this.focus(); });

//小数点以下2桁までの数値
$(".decimal-2-places").numeric({ decimalPlaces: 2 });

//フォームへのペースト禁止
$(".notpast").on('paste','input[type=text]',
	function(){
	return false;
});
</script>

// 数値

$(".numeric").numeric();

// 整数:

$(".integer").numeric(false, function() { alert("Integers only"); this.value = ""; this.focus(); });

// 正数

$(".positive").numeric({ negative: false }, function() { alert("No negative values"); this.value = ""; this.focus(); });

// 正の整数

$(".positive-integer").numeric({ decimal: false, negative: false }, function() { alert("Positive integers only"); this.value = ""; this.focus(); });

//小数点以下2桁までの数値

$(".decimal-2-places").numeric({ decimalPlaces: 2 });

//フォームへのペースト禁止

$(".notpast").on('paste','input[type=text]',

function(){

return false;

});

</script>

上記のように「数値」「整数」「正数」「正の整数」「小数点以下○桁までの数値」の入力制御が可能になります。
※なお、フォームに値を入力する際に制御は掛かりますが、テキストのペーストが可能なので、今回はペースト禁止の処理も加えています。

HTML

フォーム部分は以下のようにします。

<form class="notpast">
数値:<input class="numeric" type="text" />
<br/><br/>
整数:<input class="integer" type="text" />
<br/><br/>
正数:<input class="positive" type="text" />
<br/><br/>
正の整数:<input class="positive-integer" type="text" />
<br/><br/>
小数点以下2桁までの数値:<input class="decimal-2-places" type="text" />
</form>