Question

是否可以在表单字段中使用范围滑块，并允许用户通过键入数字来输入值，即在同一表单字段上输入type =“range”和input type =“number”用来压倒另一个的那个？

好的，所以响应下面这里是我的代码：

<label for="monday">Monday Sales Target - $<span id="monday"></span></label>
<input type="range" min="0" max="5000" id="monday" name="monday" value="0" step="50" oninput="showValue1(this.value)" />

JavaScript的：

function showValue1(newValue) { 
    document.getElementById("monday").innerHTML=newValue;
}

当范围滑块改变并输出在标签末尾选择的数字时，但是一些用户抱怨滑块过于繁琐并且想要通过数字输入直接输入数字。这可能吗？

Answer 1

您可以使用range使用input事件根据onkeyup值更改input值，这是您需要的内容：

<强> HTML：

<强> JS：

function changeRangeValue(val){
    document.getElementById("range").value = isNaN(parseInt(val, 10)) ? 0 : parseInt(val, 10);
    showValue1(val);
}

<强>演示：

function showValue1(newValue) { 
    document.getElementById("monday").innerHTML= newValue;
}

function changeRangeValue(val){
    document.getElementById("range").value = isNaN(parseInt(val, 10)) ? 0 : parseInt(val, 10);
    showValue1(val);
}

function changeInputValue(val){
    document.getElementById("number").value = isNaN(parseInt(val, 10)) ? 0 : parseInt(val, 10);
    showValue1(val);
}

<input type="number" id="number" min="0" max="5000" onkeyup="changeRangeValue(this.value)"/> 
<br />

<label for="monday">Monday Sales Target - $<span id="monday"></span></label>

<input type="range" min="0" max="5000" id="range" name="monday" value="0" step="50" oninput="changeInputValue(this.value)" />

注意：

您无法为HTML中的多个元素设置相同的id。

带有直接数字输入的范围滑块

1 个答案: