onmousedownとonchangeを一緒に使う方法

divと3つのスライドバー、つまり入力タイプ=範囲があります。スライドバーをドラッグすると、divの背景色が変更されます。私は 'onchange'イベントを使用してthis.valueと数値の2つのパラメータを持つ関数を呼び出しました。 divの背景色を設定します 3つのスライドバーは、0〜255の範囲で 'rgb'値を表します。これまでのところこれが機能しています。onmousedownとonchangeを一緒に使う方法

しかし、私はそれが働く方法は、今起こっているものではありません。スライドバーをドラッグすると、色は変化せず、 'onmouseup'アクションが発生したときに変更されます。スライドバーをドラッグしているときに色を変更したい。

<html> 
      <head> 
       <script> 
       var r=0; 
       var g=0; 
       var b=0; 
        function set(){ 
         r=g=b=128; 
         document.getElementById('div').style.backgroundColor="rgb("+r+","+g+","+b+")"; 
        } 
        function change(val,bar){ 

         if (bar==1){ 
          r=val; 
         } 
         if (bar==2){ 
          g=val; 
         } 
         if (bar==3){ 
          b=val; 
         } 

         document.getElementById('div').style.backgroundColor="rgb("+r+","+g+","+b+")"; 
        } 
       </script> 
      </head> 

      <body onload="set()"> 

       <div id="div" style="width:400px;height:100px;"> 

       </div> 
       <table border=""> 
       <tr><td>red</td><td><input id="r_slide" type="range" style="width:200px" min="0" max="255" onchange="change(this.value,1)"></td></tr> 
       <tr><td>blue</td><td><input id="g_slide" type="range" style="width:200px" min="0" max="255" onchange="change(this.value,2)"></td></tr> 
       <tr><td>green</td><td><input id="b_slide" type="range" style="width:200px" min="0" max="255" onchange="change(this.value,3)"></td></tr> 
       </table> 
      </body> 
     </html>

出典

2016-04-29 Francis

あなたは、このための入力イベントハンドラを使用することができます。はここに私のコードです。例：

<input type="range" oninput="change(this.value,x)">

出典

2016-04-29 10:12:21

変更を有効にするには、onInputを使用します。 onInputはIEのいくつかのバージョンではサポートされていないので、私はonChangeをあなたのすべての基地をカバーするフォールバックとして残しました。代わりに、変更が起こった後、あなたがonInputイベントを使用することができますトリガonChange、の

var r=0; 
 
var g=0; 
 
var b=0; 
 

 
function set() { 
 
    r=g=b=128; 
 
    var div = document.getElementById('div'); 
 
    div.style.backgroundColor="rgb("+r+","+g+","+b+")"; 
 
} 
 

 
function change(val,bar){ 
 
    if (bar==1){ 
 
     r=val; 
 
    } 
 
    if (bar==2){ 
 
     g=val; 
 
    } 
 
    if (bar==3){ 
 
     b=val; 
 
    } 
 

 
    var div = document.getElementById('div'); 
 
    div.style.backgroundColor="rgb("+r+","+g+","+b+")"; 
 
}

<html> 
 
<head> 
 
</head> 
 
<body onload="set()"> 
 
    <div id="div" style="width:400px;height:100px;"></div> 
 
    <table border=""> 
 
     <tr> 
 
      <td>red</td> 
 
      <td> 
 
       <input id="r_slide" type="range" style="width:200px" min="0" max="255" oninput="change(this.value,1)" onchange="change(this.value,1)"> 
 
      </td> 
 
     </tr> 
 
     <tr> 
 
      <td>blue</td> 
 
      <td> 
 
       <input id="g_slide" type="range" style="width:200px" min="0" max="255" oninput="change(this.value,2)" onchange="change(this.value,2)"> 
 
      </td> 
 
     </tr> 
 
     <tr> 
 
      <td>green</td> 
 
      <td> 
 
       <input id="b_slide" type="range" style="width:200px" min="0" max="255" oninput="change(this.value,3)" onchange="change(this.value,3)"> 
 
      </td> 
 
     </tr> 
 
    </table> 
 
</body> 
 
</html>

出典

2016-04-29 10:15:45 jdgregson

。（more info）。

onInput（ちょうどinput:type=rangeと同じ）は、IE8以下、またはOpera 9以下では使用できません。

<table border=""> 
    <tr><td>red</td><td><input id="r_slide" type="range" style="width:200px" min="0" max="255" oninput="change(this.value,1)"></td></tr> 
    <tr><td>blue</td><td><input id="g_slide" type="range" style="width:200px" min="0" max="255" oninput="change(this.value,2)"></td></tr> 
    <tr><td>green</td><td><input id="b_slide" type="range" style="width:200px" min="0" max="255" oninput="change(this.value,3)"></td></tr> 
</table>

jsFiddle

出典

2016-04-29 10:15:45 Jordumus

onmousedownとonchangeを一緒に使う方法

答えて

関連する問題