Question

说我有一个<input type=range min=0 max=100 step=1 />。如果我集中输入，然后使用键盘上下移动，则值会相应更改。当我单击范围内的任意点时，该值将跳至单击鼠标的位置。这对于许多应用程序来说很有意义，但是我可以更改此行为以使值逐步增大或减小，就像我向上或向下移动箭头键一样吗？这对于许多科学应用都是有意义的。

在范围输入的规格中，我找不到有关鼠标行为的专门信息： https://html.spec.whatwg.org/#range-state-(type=range)

也许有人在回答？

Answer 1

您可以执行以下操作。

<!DOCTYPE html>
<script> var oldValue = 50; </script>
<input type=range max=100 step=1 oninput=" if (oldValue) { this.value = this.value > oldValue ? oldValue + 1 : oldValue - 1; } oldValue = parseInt(this.value, 10);">

Answer 2

我只是为你做的：

$("#rangecontainer").mousedown(function(event){
  event.preventDefault();
  var rangeInput = $(this).children();
  var actualValue = parseInt(rangeInput.val());
  if(event.pageX > (rangeInput.position().left + 15 + actualValue)){
    rangeInput.val(actualValue+1);
  }
  else{
    rangeInput.val(actualValue-1);  
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="rangecontainer"><input type="range" min="0" max="100" step="1" /></div>

编辑：通过在左侧添加15px，可以避免出现位置平衡器错误

我能否使范围输入的值在单击时上下移动？

2 个答案: