テキストボックスの入力値を数値限定にしてくれる「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)
デモ

マウスで貼り付けができてしまうので、ひと処理追加しました。
  • このエントリーをはてなブックマークに追加

関連記事

レスポンシブに対応した画像ギャラリーが実装できる「Responsive Image Gallery」

「Responsive Image Gallery with Thumbnail Carousel」はレスポンシブにも対応した画像ギャラリーが実装できるjQueryプラグインです。Twitterの「最

入力されたメールアドレスのドメインをサジェストしてくれる「mailcheck.js」

「mailcheck.js」は、入力されたメールアドレスのドメインをサジェストしてくれるjQueryプラグインです。 ダウンロード スクリプト 実装 v

ECサイトの商品表示に使えそうなスライダー「Simple Multi-Item Slider」

「Simple Multi-Item Slider」は、いうなればネスト型の画像スライダーです。ECサイトでの商品陳列からサムネイルメニューなどにも使用できそうです。ダウンロード デモ スクリプ

入力数値の桁区切り挿入

ユーザに数値を入力してもらう際に区切りを入れるようにすると入力ミスを少なくすることができます。このソースは、SugarJSというものから拝借して少し改変しています。 実装 fu

シンプルにモーダルウィンドウを実装できる「leanModal」

「leanModal」は、シンプルにモーダルウィンドウを設置できるjQueryプラグインです。オプションは少なめですが、複雑な機能は必要なく単に設置したいという場合にはもってこいのライブラリだと思いま

マウスオーバーでキャプション表示してくれる プラグイン

画像マウスオーバーするとキャプションを出現させるプラグイン (jQuery 1.10.2で動作確認のできたものに限定しています。デモ一覧) imgタグの#alt属性から自動でキャプションを生成

ナビゲーションメニューを画面サイズによってドロップダウンにしてくれる「TinyNav.js」

「TinyNav.js」はナビゲーションメニューを画面サイズがある以下になるとドロップダウンにしてくれるjQueryプラグインです。 スクリプト 実装 スタイルシート

カレンダー実装プラグイン「Bootstrap Calendar」

「Bootstrap Calendar」はBootstrap 3ベースでカレンダーが実装できるjQueryプラグインです。 ダウンロード スクリプト

リストをインクリメント検索・ソートできる「List.js」

List.jsは、リストをインクリメント検索やソートができるjQueryプラグインです。 ダウンロードはこちら リストだけでなくテーブルにも実装可能のようです。 スクリプト

no image

クリックするとテキストボックスにかわるラベルを実装

Flickrなどでは、写真の編集画面でキャプションをラベルとして表示しておきクリックするとテキストボックスやテキストエリアに変換してくれて編集させるようなインターフェイスを実装しています。結構いいです

Comment

  1. jQuery | テキストボックスの入力値を数値限定にしてくれる「jQuery – numeric」 | Think deeply, Do less, More effective

@penguin_striker へ返信する コメントをキャンセル

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

*

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

    PAGE TOP ↑