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>

（当然，这仅在您按下回车并将值提交给“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

这个小提琴有效：

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

（实际上，这是您当前的代码。您是否导入了 jQuery 库？）
请记住，您已将滑块的范围设置为 200。尝试一些介于 0 和 200 之间的值。

于 2012-11-20T14:25:33.837 回答
0 
$('#box').change(function(){
    $('#slider').attr({"value":parseInt(this.value)});
});

可能会奏效。

于 2013-05-30T02:41:25.087 回答
0

这实际上很容易。这一切都写在jQuery 工具 API 文档中。所以我把我的代码改成了这个，它起作用了：

<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 回答