個別記事のページです

2015年12月14日(月)
このエントリーをはてなブックマークに追加

jQueryで数字入力ボックスとアップダウンボタンを作る!


blog_input_updow.png

HTML5ではinput要素に指定するだけで、三角のアップダウンボタンが付いた入力フォームができます。


<input type="number" name="num1" min="10" max="500" value="1" step="1" required>


でも、もう少しオシャレにしたいときってありますよね。
そんなときは簡単に入力欄を作ってしまいましょう!

今回は、jQuery UI Spinnerウィジェットは使いません。
そちらも簡単にスピンを設置できますので探していただけると幅が広がるかと思います。

イメージはこんな感じです。
※コードは商用個人特に問いません。ただ使用上責任は負えませんので、自己責任の上、ご利用ください。


ボタンを押すと上下に数字が変更されますね。

コードは下記になります。
コピペでHTMLファイルで保存すると確認ができます。
また必要な部分だけ使うのも大丈夫です。
ボタンは好きな画像を指定してください。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>jQueryでのinput number</title>
<script type="text/javascript"
  src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
</head>
<body>
<!-- ここからCSSです。 必要に応じて外部ファイルにしてください-->
<style type="text/css">
<!--
input.kazu {
    width: 52px;
    height: 34px;
    float: left;
    margin-top: 5px;
    text-align: right;
    padding: 0 5px;
}
div.button {
    float: left;
    width: 16px;
    padding-left: 5px;
    padding-top: 8px;
}
input.spinner_up {
    margin-top: 0px;
    border: 0px;
    width: 16px;
    height: 14px;
    background: url("★上ボタンの画像.jpgを指定してください") no-repeat;
}
input.spinner_down {
    margin-top: 0px;
    border: 0px;
    width: 16px;
    height: 14px;
    background: url("★下ボタンの画像.jpgを指定してください") no-repeat;
}
-->
</style>
<!-- ここからJSです。 必要に応じて外部ファイルにしてください-->
<script type="text/javascript">
<!--
function spinner(counter){
    var step = 1;
    var min = 1;
    var max = 100;

    var kazu = $(".kazu").val();
    var kazu = parseInt(kazu);
      if (counter == 'up') { kazu += step; };
      if (counter == 'down') { kazu -= step; };

    if ( kazu < min ) { kazu = min; };
    if ( max < kazu ) { kazu = max; };

    $(".kazu").val(kazu);
}
//-->
</script>
<title>jQueryでの表示・非表示サンプル</title>
</head>
<!-- ここからBODYです。-->
<body>
    <!--★数量★-->
    <input class="kazu" type="text" name="quantity" value="1" tabindex="1">
    <!--★ボタン★-->
    <div class="button">
        <input type="button" name="spinner_up" class="spinner_up" value="" onclick="javascript:spinner('up');">
        <input type="button" name="spinner_up" class="spinner_down" value="" onclick="javascript:spinner('down');">
    </div>
</body>
</html>


数値チェック等々必要に応じて追加してくださいね。
※コードは商用個人特に問いません。ただ使用上責任は負えませんので、自己責任の上、ご利用ください。

書籍の内容と遜色のないPDFを無料プレゼントしております。
売れてる人しか知らない!売れるホームページの10の常識
過度な営業は一切しておりません。

簡単無料お見積もり

問い合せ内容 見積り  相談  更新管理  PPC広告・SEO対策
  • 売上げアップ
  • 会社拡大
  • ブランド力を持ちたい
  • 新規事業参入したい
  • 単価を上げたい
  • 価格競争したくない
  • 社内環境を良くしたい
  • 経営者が楽になる
  • 社員を成長させたい
  • 良い求人が欲しい
  • 離職率を下げたい
  • 残業を減らしたい
  • 客層をよくしたい
  • 会社がうまく回るようにしたい
  • クレームを減らしたい
  • リピート、口コミを増やしたい
  • ターゲットを絞りたい
  • 会社の方針を明確にしたい
  • SEO対策
内容
お問合せ