有没有办法将范围输入的默认值设置为空？

Question

我有一个 HTML5 范围输入

<input name="testing" type="range" min="0" max="10" step="1">

当没有设置属性“value”时，它将默认值设置为中间值（即本例中的 5）。有没有办法让它为空，以便我知道用户是否主动输入了什么？

我有另一个用于显示值的 div。开头的值是“？”，所以用户会知道他们没有输入任何内容。问题是如果未主动设置值，则防止输入将值提交到后端。

Answer 1

不幸的是，这是对[type=range] 元素的限制：

默认值为最小值加上最小值与最大值之差的一半，除非最大值小于最小值，在这种情况下默认值为最小值。

——HTML5 Specification

如果您别无选择，只能使用此元素，我建议您在范围内添加一个额外的值，然后在验证表单时检查该值。 即如果您当前的范围是 0 到 10，请将您的范围设为 -1 到 10，然后将值默认为 -1；在验证方面，检查该值是否不等于 -1。

Answer 2

根据@James Donnelly 的回答

我认为您的解决方案是添加一些 JS 进行自己的检查。

当用户更改值并要求更改时更改布尔值。

这里有一个可以帮助您的解决方案。

var rangechanged=false;

$("#submit").click(function(){checkRange()});

function checkRange()
{
  console.log(rangechanged);
   if(rangechanged==false)
     alert("You must lock the range first");
  
   return rangechanged; 
}

$("#lockrange").click(function(){
  rangechanged=true;
  $("#lockrange").hide();
});

$("#range").change(function(){
  rangechanged=true;
  $("#lockrange").hide();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<form>
<input name="testing" id="range" type="range" min="0" max="10" step="1">
<button type="button" id="lockrange">Lock range</button>
<button type="button" id="submit">Submit</button>
</form>

Answer 3

你可以添加一个属性“值”，并设置为0，例如：

<input type="range" min="0" max="10" value="0" />

希望对你有帮助

Answer 4

最简单的解决方案就是添加一个自定义属性HTML5 Custom Data Attributes (data-*)，例如命名数据值。在 HTML 中： <input name="testing" type="range" min="0" max="10" step="1" data-value="">。 在后端更新两个属性，值和自定义之一，例如在 PHP 中echo '<input name="testing" type="range" min="0" max="10" step="1" value="'.$answer.'" data-value="'.$answer'">';

然后签入JS：

if($(this).hasClass())
    var value = $(this).attr("data=value");
    if(value.length){
        alert("Please answer the question.");
    }
}

Answer 5

您必须做的是，在您创建了输入游侠之后， 使用 jquery 将这些范围渲染为 0，它将起作用

Answer 6

• 对我有用的是创建一个隐藏输入，以跟踪滑块中的值变化，默认值为“-1”
• 这样当服务器处理表单时，我可以找到所有值已更改的隐藏字段，因为输入类型范围不允许空值
• 由于我的滑块有刻度线，我不能将 -1 值用于输入灵魂

:root {
  --range-slider-size: 6px;
  --thumb-height: calc(var(--range-slider-size)*4)
}

.integer-range-wrapper {
  padding-bottom: calc(var(--range-slider-size) * 2);
  padding-top: calc(var(--range-slider-size) * 2);
}


.ticks {
  display: flex;
  justify-content: space-between;
  padding: var(--range-slider-size) calc(var(--range-slider-size) * 2);
}

.tick {
  position: relative;
  display: flex;
  justify-content: center;
  width: 1px;
  background: gray;
  height: var(--range-slider-size);
  line-height: calc(var(--range-slider-size) * 6);
  margin-bottom: calc(var(--range-slider-size) * 2);
}

input[type=range] {
  -webkit-appearance: none;
  display: block;
  margin: 0;
  width: 100%;
  background: transparent;
}


input[type=range]::-webkit-slider-runnable-track {
  -webkit-appearance: none;
  width: 100%;
  height: calc(var(--range-slider-size) * 4);
  color: transparent;
  background: lightgray;
  border-radius: 999px;
  border: none;
}

input[type=range]::-moz-range-track {
  -webkit-appearance: none;
  width: 100%;
  height: var(--thumb-height);
  color: transparent;
  background: lightgray;
  border-radius: 999px;
  border: none;
}

input[type=range]::-ms-track {
  -webkit-appearance: none;
  width: 100%;
  height: var(--thumb-height);
  color: transparent;
  background: lightgray;
  border-radius: 999px;
  border: none;
}

input[type=range]::-ms-fill-lower {
  display: none;
}

input[type=range]::-ms-fill-upper {
  display: none;
}

input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  height: var(--thumb-height);
  width: var(--thumb-height);
  border-radius: 30px;
  background: black;
  box-shadow: 0px 2px 10px -2px;
}

input[type=range]::-moz-range-thumb {
  -webkit-appearance: none;
  height: var(--thumb-height);
  width: var(--thumb-height);
  border-radius: 30px;
  background: black;
  box-shadow: 0px 2px 10px -2px;
}

input[type=range]::-ms-thumb {
  -webkit-appearance: none;
  height: var(--thumb-height);
  width: var(--thumb-height);
  border-radius: 30px;
  background: black;
  box-shadow: 0px 2px 10px -2px;
}

 <div class="integer-range-wrapper">
   <input type="range" name="foo" id="foo" max="5" min="0" value="0" oninput="document.getElementById('hidden-foo').value=this.value">
   <input hidden name="hidden-foo" id="hidden-foo" value="-1">

   <div class="ticks">
     <span class="tick">0</span>
     <span class="tick">1</span>
     <span class="tick">2</span>
     <span class="tick">3</span>
     <span class="tick">4</span>
     <span class="tick">5</span>
   </div>
 </div>

Answer 7

用js来做：

var input = document.getElementById('inputSlider')
input.value = 0