0

入力のセットがあり、入力する値ごとに「範囲」スライダーと「数値」入力があります。各入力に対して onchange="send(input_id, input_kind, this.value)" 属性を使用して、スライダーと数値フィールドの両方から呼び出される JS が少しあります。スライダーが移動した場合は数値を更新し、数値が変更された場合はスライダーを更新します。

これは、スライダーを動かすとすぐに、数値が追跡を開始するとすぐに、スライダーには問題ありません。小さな上下矢印で数値を調整するか、数値を入力しても、スライダーは更新されません。JS は、別のフィールドが選択されるまで呼び出されません。入力はフォーカスを失い、そのデータを bind{k, d, v} 関数に渡します。

HTML:

            <div class="number-pair">
                <sub-title>X-Position</sub-title><br />
                <input id="/layout/1/slider" class="slider" type="range" value="0" min="-1" max="1" step="0.01" onchange="bind('/layout/1', 'slider', parseFloat(this.value))" />
                <input id="/layout/1/number" class="number-box" type="number" value="0" min="-1" max="1" step="0.01" onchange="bind('/layout/1', 'number', parseFloat(this.value))" /><br />    
            </div>

JS:

        function bind(id, control, v)
        { 
            if (control=="slider")
            {
            if (console) console.log("It's a slider");
                e = document.getElementById("/layout/1/number");
                if (e)
                {
                    e.value = v;
                }
            } else if (control=="number")
            {
            if (console) console.log("It's a float");                   
                e = document.getElementById("/layout/1/slider");
                if (e)
                {
                    e.value = v;
                }
            }
        }

数値矢印を使用するためにより応答性の高いバインドを取得するにはどうすればよいですか?

注意: 2 つの入力を相互にバインドするだけでなく、他の場所の画面上の効果にもバインドしているため、スライダーだけでなく、そのコンテキストでは移動応答バインディングが望ましいです。また、リテラルを使用してJSでペアの値を更新していますが、リテラルは動的式に置き換えられるため、スライダー/テキスト番号の入力ペアの全範囲をバインドできます。

4

3 に答える 3

1

コントロールがフォーカスを失うまでイベントが呼び出されないため、入力フィールドでonkeypressは、イベントではなくにバインドします。矢印の押下をトラップするには、イベントにバインドします。onchangeonchangeonclick

于 2012-05-29T03:43:10.480 に答える
1

onkeypress と onclick を使ってみませんか:

            <div class="number-pair">
<br />

                               
               

于 2012-05-29T03:46:46.897 に答える
1

onchange要素がフォーカスを失ったときにのみイベントをトリガーします。

より応答性の高いフィードバックを得るには、次を使用する必要があります。

onmousedown onmouseuponmousemoveスライダーのイベント、 「リアルタイム」効果に も使用できます。onkeypressテキストフィールドに。

于 2012-05-29T04:05:01.413 に答える