2017-03-23 9 views
0

シフトキーを押したときに2つのスライダを同期しようとしています。 しかし、問題は、e.shiftKeyが範囲入力イベントに対して未定義であることです。範囲入力で押されたシフトキーを検出する方法は?

e.shiftKeyを報告するonmousedownイベントを使用しようとしましたが、範囲値を正しく設定しませんでした。

範囲入力でシフトキーが押されているかどうかを検出するにはどうすればよいですか?

$('input[type=range]').on("input",function(e){ 
 
\t $('#value').text(this.value); 
 
    if(e.shiftKey){ 
 
    \t var newValue = this.value; 
 
    \t $('input[type=range]').each(function(){this.value=newValue}); 
 
    } 
 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<html> 
 
<body> 
 
<input type="range"> 
 
<input type="range"> 
 
<span id="value"></span> 
 
</body> 
 
</html>

答えて

1

あなたは関係なく、shiftKeyレンジ入力のクリックに対してチェックする必要があります(jQueryのは、単に便宜のためにそれを使用して、オプションです):

var sync = false; 
 
$(document).on('keydown', function(e) { 
 
    if (e.shiftKey) { 
 
     sync = true; 
 
    } 
 
}); 
 
$(document).on('keyup', function(e) { 
 
    if (e.shiftKey == false) { 
 
     sync = false; 
 
    } 
 
}); 
 
$('input[type=range]').on("input",function(e){ 
 
    $('#value').text(this.value); 
 
    if (sync) { 
 
     var newValue = this.value; 
 
     $('input[type=range]').each(function(){this.value=newValue}); 
 
    } 
 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<html> 
 
<body> 
 
<input type="range"> 
 
<input type="range"> 
 
<span id="value"></span> 
 
</body> 
 
</html>

関連する問題