ポンクソフト

テキストフィールドの数値をマウスの上下移動で増減する - jQuery入門

前ページ jQuery入門 TOP 次ページ

目次

  1. jQuery入門
  2. jQueryのインストール・簡単な使い方
  3. クイズゲームの作り方
  4. 秘密の暗号を作ってみよう(たぬき暗号)
  5. アクションゲームを作ってみよう(ぬりかべ)
  6. 画像を使ったジグソーパズルを作ってみよう
  7. もぐらたたきっぽいゲーム
  8. ドラッグ可能なポップアップウインドウを作ろう
  9. jQuery UI Sortableで1ラインオセロゲーム
  10. ブラウザ全体をブロックしてみる
  11. Geolocation APIを使って都道府県のセレクトボックスを現在地に近い順にソートする
  12. 発生したイベントの状態を保持・保存する6つのパターン
  13. Ajaxを利用したシンプルなイメージギャラリーを作ってみる
  14. テーブルにページ送り(ページング)を実装してみる
  15. jQuery UI Draggableを使って付箋(sticky)を作ってみる
  16. カラムでソートできるテーブルを自作してみる
  17. テーブルを使ったシンプルなドット絵エディタを作ってみる
  18. iPhoneのようにマウスではじいてスクロール(フリックスクロール)を実装してみる
  19. テキストフィールドの数値をマウスの上下移動で増減する
  20. iPhoneのように大きい画像の表示領域をマウスのドラッグで移動してみる
  21. iPhoneのように画像をダブルクリックした地点を中心に拡大縮小する
  22. リアルタイムプレビュー付きのHTMLエディタを作ろう
  23. 保存できる付箋を作ってみる(Cookie、localStorage)

スピナー

数値しか入らないテキストフィールドにJavaScriptで入力支援する場合はどうすれば良いのでしょうか。プルダウンで選ばせるのが一般的だと思いますが、数値の範囲が広くなると大変です。他にも自由入力にして数値以外を禁止する、スピンボタンを実装する、などあると思いますが、今回はマウスの上下移動で増減する仕組みを作ってみました。

実行結果

テキストフィールド上でマウスのボタンを押して上下に移動すると数値が増減します。移動距離が大きいほど増減量が多くなります。

スピナーのソース

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
<title>テキストフィールドの数値をマウスの上下移動で増減する</title>
<script>
$(function() {
  $('#updown').mousedown(function(e) {
    $(this).css('cursor', 'n-resize');
    var sy = e.clientY;
    var vy = 0;
    var id = setInterval(function() {
      $('#updown').val(Number($('#updown').val()) + vy);
    }, 40);
    $(document).on('mousemove.updown', function(e) {
      vy = Math.floor((e.clientY - sy) / 10);
      return false;
    }).one('mouseup', function() {
      $('#updown').css('cursor', 'auto');
      $(document).off('mousemove.updown');
      clearInterval(id);
    });
  });
});
</script>
</head>
<body>
<input id="updown" type="text" value="0" readonly="readonly">
</body>
</html>

プログラムの解説

$('#updown').mousedown(function(e) {・・・});
テキストフィールド上でマウスが押されたときに以下全ての処理を行っています。
$(this).css('cursor', 'n-resize');
まずカーソルの形を上下の矢印にします。
var sy = e.clientY;
var vy = 0;
syにはマウスが押されたときのY座標が入ります。vyには数値の増減量がはいります。
var id = setInterval(function() {
  $('#updown').val(Number($('#updown').val()) + vy);
}, 40);
タイマイベントを40ms毎で呼び出すように設定しています。中身は、テキストフィールドの数値に増減量であるvyを足しているだけです。
$(document).on('mousemove.updown', function(e) {
マウスが移動したときのイベントを設定しなければ当然数値の増減はできないわけですが、テキストフィールド$('#updown')に対してイベントを設定するとテキストフィールドから外れたときの移動量を感知できなくなるので使い勝手が悪くなります。そこで、ドキュメント全体に対してイベントを設定するのですが、マウスが離されたときにイベントを指定して削除したいので名前空間を付加しています。イベントmousemoveの後ろに付いている「updown」が名前空間です。
vy = Math.floor((e.clientY - sy) / 10);
マウスが移動したときのイベントの中身は、現在のマウスの位置から開始位置を引いて数値の増減量を算出しています。
}).one('mouseup', function() {
こちらはマウスボタンが離されたときのイベントを設定しています。oneメソッドを使うとイベントを一度だけ実行することができます。
$('#updown').css('cursor', 'auto');
まずマウスを元の形に戻し、
$(document).off('mousemove.updown');
マウスが移動したときのイベントを削除しています。ここでマウスが移動したときに付加した名前空間を参照しています。
clearInterval(id);
最後にタイマイベントもクリアします。

注意点

マウスのボタンを押したままブラウザの外に出た場合、IEだとイベントを感知できませんが、修正が面倒なのでそのままで・・・すみませんです。
前ページ jQuery入門 TOP 次ページ
このエントリーをはてなブックマークに追加 そっか0