14

HTML5の範囲入力とテキストボックス入力があります。範囲が変更されると、テキスト ボックスが更新されます。しかし、テキスト ボックスに数値を入力すると範囲入力が更新されるようにするにはどうすればよいでしょうか。

これは私の現在のコードです:

<div>
<input id="slider" type="range" min="0" max="200" />
<input id="box" type="text" value="0"/>
</div>

<script>
var slider = document.getElementById('slider');
$('#box').change(function(){slider.value=parseInt(this.value)});
</script>

テキスト ボックスを編集しても、スライダー (範囲入力) は変化しません。私は何を間違っていますか？スライダーを更新するためにslider.valueを使用すべきではないということでしょうか? それが理由である場合、それを行う正しい方法は何ですか?

4

6 に答える 6

32

やあみんな知らない人、これにはjsやjqueryは必要ありません

<form>
  <div>
    <input id="rangeInput" type="range" min="0" max="200" oninput="amount.value=rangeInput.value" />
    <input id="amount" type="number" value="100" min="0" max="200" oninput="rangeInput.value=amount.value" />
  </div>
</form>

于 2015-03-10T05:35:12.630 に答える
2

これは単純なスクリプトです。これを行うだけです。

<label for=range1>Slide, then press "Click to search slider value"</label>
<span>-1000 </span><input type="range" id="slide1" min="-1000" max="1000" value=0 step=0.25 onchange="printValue('slide1', 'rangeValue1')"><span> 1000    </span>
<i><input type=text id="rangeValue1" value=0 width=25% onchange="slideValue('slide1', 'rangeValue1');"><span> is the value of the slider now</span></i><br/><br/>
<script>
function printValue(sliderID, spanbox) {
    var x = document.getElementById(spanbox);
    var y = document.getElementById(sliderID);
    x.value = y.value;
}
function slideValue(sliderID, spanbox){
    var x = document.getElementById(spanbox);
    var y = document.getElementById(sliderID);
    y.value = parseInt(x.value);
}

window.onload = function() { printValue('slide1', 'rangeValue1'); }

</script>

（もちろん、これはEnterキーを押して値を「onchange」に送信した場合にのみ機能します）

于 2013-07-10T20:30:14.963 に答える
1

私の側では、Javascriptだけでonchangeイベントを追加しました。

また、範囲に value=0 を追加して、最初から開始するようにしました。

<div>
<input id="slider" type="range" min="0" max="200" value="0"/>
<input id="box" type="text" value="0"/>
</div>

</p> 

var slider = document.getElementById('slider');
var box = document.getElementById("box");

slider.onchange = function(){
    box.value = slider.value;
}

両側で機能させたい場合は、これを追加します

box.onkeyup = function(){
      slider.value = box.value;      
} ​
于 2012-11-22T03:52:30.890 に答える
0

実はとても簡単です。それはすべてjQueryToolsAPIドキュメントで書かれています。だから私は自分のコードをこれに変更しました、そしてそれはうまくいきました：

<div>
<input id="slider" type="range" min="0" max="200" />
<input id="box" type="text" value="0"/>
</div>
<script>
var sliderapi = $("#slider").data("rangeinput");
$('#box').change(function(){sliderapi.setValue(parseInt(this.value))});
</script>
于 2012-11-22T03:43:52.033 に答える
0

このフィドルは機能します：

var slider = document.getElementById('slider');
$('#box').change(function(){
    slider.value=parseInt(this.value);
});

(これが実際の現在のコードです。jQuery ライブラリをインポートしましたか?)
スライダーの範囲を 200 に設定したことに注意してください。0 から 200 の間の値を試してください。

于 2012-11-20T14:25:33.837 に答える