是否可以链接范围和数字 HTML 输入？

Question

有没有办法链接<input type="range"> 和<input type="number"> 的值？

我想对数值输入的滑块或进行更改，并更新这两个字段。出于某种原因，到目前为止，我只能从 range 元素中获取未定义的值。

这是我当前用于这部分文档的 JavaScript 和 HTML：

function updateTextInput1(val) {
  alert(val);
  document.getElementById('num1').value = val;
}

<input class="inputRange" type="range" min="0" max="100" onchange="updateTextInput1(this.val)" />
<input class="inputNumber" id="num1" min="0" max="100" type="number" value="0" />

Answer 1

它不起作用，因为 updateTextInput1(this.val) 应该是 updateTextInput1(this.value)：

function updateTextInput1(val) {
  document.getElementById('num1').value = val;
}

<input class="inputRange" type="range" min="0" max="100" onchange="updateTextInput1(this.value)" />
<input class="inputNumber" id="num1" min="0" max="100" type="number" value="0" />

不过，我建议使用unobtrusive JavaScript。

只需将input 事件附加到每个元素。这样，两个元素将同步。

var range = document.querySelector('.inputRange');
var field = document.getElementById('num1');

range.addEventListener('input', function (e) {
  field.value = e.target.value;
});
field.addEventListener('input', function (e) {
  range.value = e.target.value;
});

<input class="inputRange" type="range" min="0" max="100" value="0" />
<input class="inputNumber" id="num1" min="0" max="100" type="number" value="0" />

或者您可以使用更紧凑的方法并选择同级元素：

document.querySelector('.inputRange').addEventListener('input', updateValue);
document.getElementById('num1').addEventListener('input', updateValue);

function updateValue (e) {
  var sibling = e.target.previousElementSibling || e.target.nextElementSibling;
  sibling.value = e.target.value;
}

<input class="inputRange" type="range" min="0" max="100" value="0"/>
<input class="inputNumber" id="num1" min="0" max="100" type="number" value="0" />

Answer 2

要在每次范围或输入文本发生变化时显示，您可以在输入范围上使用 oninput 和 onchange，在输入类型文本上也可以使用 onkeypress 和 onchange：

function updateTextInput1(val) {
  val = val > 100 ? 100 : val;
  val = val < 0 ? 0 : val;
  document.getElementById('range').value = val;
  document.getElementById('num1').value = val;
}

    <input class="inputRange" id="range" type="range" min="0" max="100" oninput="updateTextInput1(this.value)" onchange="updateTextInput1(this.value)" />
    <input class="inputNumber" id="num1" min="0" max="100" type="number" value="0" onkeypress="updateTextInput1(this.value)" onchange="updateTextInput1(this.value)" />

Answer 3

错误是：this.val 而不是 this.value

function updateTextInput1(val) {
  alert(val);
  document.getElementById('num1').value = val;
}

<input class="inputRange" type="range" min="0" max="100" onchange="updateTextInput1(this.value)" />
<input class="inputNumber" id="num1" min="0" max="100" type="number" value="0" />

Answer 4

您应该使用 js/jq 绑定事件。要链接两者，您可以针对特定的兄弟元素（或任何其他相关的横向方法）：

$('.inputRange, .inputNumber').on('input', function(){
  $(this).siblings('.inputRange, .inputNumber').val(this.value);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input class="inputRange" type="range" min="0" max="100" value="0"/>
<input class="inputNumber" id="num1" min="0" max="100" type="number" value="0" />