jQueryUI:「input type=number」を擬似的に作る

goto_jp 803views 更新:2014年6月9日

サンプルはこちら。

See the Pen Eurik by Kazuyoshi Goto (@KazuyoshiGoto) on CodePen.

数値入力欄の右の上下ボタンより一定の数値を増減させられます。

HTML5からの「input type=number」と同じなのですが、IEなど未対応のブラウザに同様の動きをさせるために使えます。

JavaScript

$(function() {
  $('#point').spinner({
    max: 150,
    min: 50,
    step: 5
  });
});

ID「#point」のフィールドに「spinner()」コンポーネントを適用しています。
オプションで最大150、最低50、1クリックでの増減を5と設定しています。

スピナーのクリックではなく直接入力してしまえば上限下限やステップに関係なく入力できますが、spinnerコンポーネント自体は入力補助のみでバリデートまでは行わないので、必要であれば別途バリデート処理が必要です。

ログイン / 新規登録してコメントする

このソースコードをストックして後で利用したり、作業に利用したソースコードをまとめることができます。

こちらもお役に立つかもしれません