Question

我有一个HTML5范围输入

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

当没有属性＆＃34;值＆＃34;设置，它将默认值设置为中间（在这种情况下为5）。有没有办法让它变空，以便我知道用户是否积极输入了什么？

我有另一个值显示值。在开始时，值将是＆＃34;？＆＃34;，因此用户将知道他们没有输入任何东西。问题是如果未积极设置值，则阻止输入将值提交到后端。

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

最简单的解决方案是添加自定义属性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 4

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

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

4 个答案: