Question

关于HTML中的范围输入类型当我更改滑块（范围输入类型）中的值时，文本框中显示的值但是当我在文本框中更改值时也是同样的事情时，它不会在滑块（Range输入类型）中设置该值。这是代码功能：我们还希望当我们滑动滑块时，值也会在文本框中更改功能：

 <script type="text/javascript">
function updateTextInput(val) {
document.getElementById('textInput').value=val; 
}
function updateTextInput2(val) {
document.getElementById('range1').value = val;
}
</script>

HTML：

<input type="range" min="0" max="100" value="0" id="range1"      onchange="updateTextInput(this.value);"/>
   <input type="text" id="textInput" value="0"      onchange="updateTextInput2(this.value);">

Answer 1

调试updateTextInput函数以验证要设置的值

或尝试

document.getElementById（＆＃39; textInput＆＃39;）。value = document.getElementById（＆＃39; range1＆＃39;）。value;

Answer 2

您需要将文本框中调用函数的事件从 onchange 更改为 oninput 。 onchange 事件仅在控件失去焦点后触发，即当用户点击其他内容时。每次用户更改文本框中的值时，都会触发 oninput 事件。

您的代码应如下所示：

<input type="range" min="0" max="100" value="0" id="range1" onchange="updateTextInput(this.value);" />
<input type="text" id="textInput" value="0" oninput="updateTextInput2(this.value);">

您的JavaScript功能100％正常工作。

以下是codepen上的一个工作示例。

在滑块html控件中未设置value

2 个答案: