テキストボックスの入力値を数値限定にしてくれる「jQuery - numeric」
「jQuery - numeric」は、テキストボックスへの入力を数字のみに制限してくれるjQueryプラグインです。正/負、整数/小数点 チェックまで限定してくれます。ダウンロード
スクリプト
<script src="jquery.min.js" type="text/javascript"></script> <script src="jquery.numeric.js" type="text/javascript"></script>
実装
<input class="numeric antirc" type="text">
<input class="integer antirc" type="text">
<input class="positive antirc" type="text">
<input class="positive-integer antirc" type="text">
<script type="text/javascript">
// 数値
$(".numeric").numeric();
// 整数
$(".integer").numeric({ decimal: false });
// 正の数値
$(".positive").numeric({ negative: false });
// 正の整数
$(".positive-integer").numeric({ decimal: false, negative: false });
// *「右クリック貼り付け」対応
$(".antirc").change(function() {
$(this).keyup();
});
</script>
全角チェックも含めて、主要なブラウザでは特に問題なく動作しました。
(Firefox, Chrome, IE8+, Opera, Safari)
デモ
関連記事
-
-
Bootstrap Modal + 拡張機能が実装できるプラグイン(Bootstrap 2)
Twitter Bootstrap Modalは、標準のモーダルウィンドウに様々な機能を追加することができます。 Twitter Bootstrap純正スクリプト ダウンロード / サイト
-
-
数値入力スライダー「jQuery Simple Slider」
「jQuery Simple Slider」はスライダーを使用して数値設定が行えるようにしてくれるjQueryプラグインです。"Unobtrusive Numerical Slider"とあるように余
-
-
Bootstrap Modal + 拡張機能が実装できるプラグイン
Twitter Bootstrap Modalは、標準のモーダルウィンドウに様々な機能を追加することができます。 2014/06/16 Bootstrap3対応版に書き換えをしました。
-
-
商用利用フリー Lightbox プラグイン
商用利用フリー(投稿時)のlightbox用プラグインをまとめてみました。最新のライセンスに関しては各サイトに確認をお願いいたします。) lightboxの中にもギャラリー表示が可能なもの、ギャラリ
-
-
バリデーション プラグイン
Nod Nod サイト | デモ [browser-shot url="http://rickharrison.github.io/validate.js/" width="2
-
-
カレンダー実装プラグイン「Bootstrap Calendar」
「Bootstrap Calendar」はBootstrap 3ベースでカレンダーが実装できるjQueryプラグインです。 ダウンロード スクリプト
-
-
入力テキストの文字数をカウントしてくれる「Textchange」
Twitterのようにinputやtextareaに入力した際に、文字数をカウント(ダウン)してくれるとユーザの利便性が上がります。今回使用したTextChangeは、それ以外にも入力のイベントに対し
-
-
クリックするとテキストボックスにかわるラベルを実装
Flickrなどでは、写真の編集画面でキャプションをラベルとして表示しておきクリックするとテキストボックスやテキストエリアに変換してくれて編集させるようなインターフェイスを実装しています。結構いいです
-
-
開閉できるツリー構造を表現できる「jsTree」
「jsTree」は、Webサイト上にツリー構造を表示してくれるJQueryラグインです。実際、使うかというのは謎ですが、ブログ内に設置する機会があり使用してみましたので参考まで。 ダウンロードはこち
-
-
「jqPlot」を使って円グラフを作成
Webサイトで円グラフ表示したいと要望があったので、以前使用したjqPlotでデモを作成しました。ダウンロード 最初の要望は「凡例つけて」、「いい感じにカラーリングしてほしい。」、「定期的に変更
- PREV
- 「まげでらんに」を応援!
- NEXT
- Skype 特定の機能を無効に




Comment
[…] [使い方] テキストボックスの入力値を数値限定にしてくれる「jQuery – numeric」 […]
テキストボックスの入力値を数値限定にしてくれる「jQuery - numeric」 http://t.co/TiUYLmymIz
入力フォームの数値のみ入力は、jQuery系プラグインで回避した。(htmlの拡張タグnumberではIE9がNGだった)http://t.co/pGc3jFZ0X5
jQuery | テキストボックスの入力値を数値限定にしてくれる「jQuery – numeric」 | Think deeply, Do less, More effective
[Reader Starred] jQuery | テキストボックスの入力値を数値限定にしてくれる「jQuery – numeric」 | Think deeply, Do less, More effective B! http://t.co/WAsfoFTxdN
via My Reading List: Unread http://readitlaterlist.com/users/atsystem/feed/unread
jQuery: テキストボックスの入力値を数値限定にしてくれる「jQuery ? numeric」 | Think deeply, Do less, More effective http://bit.ly/ZfZwnK