第19回 テキストフィールドの数値をマウスの上下移動で増減する – jQuery入門
2009 年 10 月 23 日 投稿者: naga3
数値しか入らないテキストフィールドにJavaScriptで入力支援する場合はどうすれば良いのでしょうか。プルダウンで選ばせるのが一般的だと思いますが、数値の範囲が広くなると大変です。他にも自由入力にして数値以外を禁止する、スピンボタンを実装する、などあると思いますが、今回はマウスの上下移動で増減する仕組みを作ってみました。
デモ
テキストフィールド上でマウスのボタンを押して上下に移動すると数値が増減します。移動距離が大きいほど増減量が多くなります。ソース
必要なら右クリックから保存してください。countupdown.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">google.load("jquery", "1.3");</script>
<script type="text/javascript">
$(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);
$().bind('mousemove.updown', function(e) {
vy = Math.floor((e.clientY - sy) / 10);
return false;
}).one('mouseup', function() {
$('#updown').css('cursor', 'auto');
$().unbind('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を足しているだけです。
$().bind('mousemove.updown', function(e) {
マウスが移動したときのイベントを設定しなければ当然数値の増減はできないわけですが、テキストフィールド$(‘#updown’)に対してイベントを設定するとテキストフィールドから外れたときの移動量を感知できなくなるので使い勝手が悪くなります。そこで、ドキュメント（$()は$(document)の略）全体に対してイベントを設定するのですが、マウスが離されたときにイベントを指定して削除したいので名前空間というものを使っています。イベントmousemoveの後ろに付いている「updown」が名前空間です。
vy = Math.floor((e.clientY - sy) / 10);
マウスが移動したときのイベントの中身は、現在のマウスの位置から開始位置を引いて数値の増減量を算出しています。
}).one('mouseup', function() {
こちらはマウスボタンが離されたときのイベントを設定しています。oneメソッドを使うとイベントを一度だけ実行することができます。
$('#updown').css('cursor', 'auto');
まずマウスを元の形に戻し、
$().unbind('mousemove.updown');
マウスが移動したときのイベントを削除しています。ここで名前空間を参照しているわけです。
clearInterval(id);
最後にタイマイベントもクリアします。