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

スピナー

数値しか入らないテキストフィールドに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　次ページ

ポンクソフト