Question

我有一个简单的数字输入，其中max="12"和12值设置，这用作小时选择器。我希望它循环播放时间，所以当你到达1并按下“向上”箭头时，它会回到var inputTimer = null; function cycle(element) { if (element.attributes.max && element.attributes.min) { var prevVal = element.value; inputTimer = setTimeout(function() { if (prevVal === element.attributes.max.value) { element.value = element.attributes.min.value; } else if (prevVal === element.attributes.min.value) { element.value = element.attributes.max.value; } }, 50); } } $("input[type='number']") .on("mousedown", function(e) { //this event happens before the `input` event! cycle(this); }).on('keydown', function(e) { //up & down arrow keys //this event happens before the `input` event! if (e.keyCode === 38 || e.keyCode === 40) { cycle(this); } }).on('input', function(e) { //this event happens whenever the value changes clearTimeout(inputTimer); });，反之亦然。

现在我的工作主要是：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="number" min="1" max="12" value="12" />

Working DEMO

我遇到的问题是我无法找到一种方法来检测输入中的箭头微调器是否已被点击，或者只是单击了整个输入。现在它有一个问题，当当前值为12或limit=0

时，当您点击字段中的任意位置时它会更改值

有没有办法检测单击事件是否发生在文本字段中的微调器/箭头上？

Answer 1

您必须处理input事件，如下所示：

$('[type=number]').on('input',function(){
  this.value %= 12 ;
  if( this.value < 1 )
    this.value -= -12 ;
})

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

Answer 2

我认为这是你真正想要的。

<input type="time" value="01:00" step="600"/>

目前没有本机方法可以捕获与输入框事件分开的箭头输入事件。使用数字输入的所有东西似乎都是为了这个目的而有点hacky。

下一个最佳选项类似于http://jdewit.github.io/bootstrap-timepicker/

Answer 3

我搜索了很多，似乎无法原生地检测到。这使得这个问题成为一个非常重要的问题，因为我认为这应该添加到新版本的HTML中。

有许多可行的工作方法。他们都无法解决问题，因为无法知道，在哪个方向上是值得的。我决定使用鼠标位置信息来检测，用户是增加还是减少一个值。当用户按住按钮时，它可以工作，但不能正确处理这种情况。

var inputTimer = null;

function cycle(event) {
  var value = this.value;
  // Value deep within bonds -> no action
  if(value>this.min && value<this.max) {
    return;  
  }
  // Check coordinate of the mouse
  var x,y;
  //This is the current screen rectangle of input
  var rect = this.getBoundingClientRect();
  var width = rect.right - rect.left;
  var height = rect.bottom-rect.top;
  //Recalculate mouse offsets to relative offsets
  x = event.clientX - rect.left;
  y = event.clientY - rect.top;
  // Now let's say that we expect the click only in the last 80%
  // of the input
  if(x/width<0.8) {
    console.log("Not click on arrows.", x, width);  
    return;
  }
  // Check "clicked button" by checking how high on input was clicked
  var percentHeight = y/height;
  // Top arrow was clicked
  if(percentHeight<0.5 && value==this.max) {
      this.value = this.min; 
      event.preventDefault();
      return false;
  }
  // Bottom arrow was clicked
  if(percentHeight>0.5 && value==this.min) {
      this.value = this.max; 
      event.preventDefault();
      return false;
  }
}
var input = document.getElementById("number");
input.addEventListener("mousedown", cycle);

<input id="number" type="number" min="1" max="12" value="12" />

Answer 4

这不适用于您具有最大值且希望包装的特定情况，但对于希望根据箭头更改处理字段值的其他人可能会有所帮助，例如设置{{1像我需要的货币值：

.toFixed(2)

Answer 5

所以我不确定无论如何都要确定被点击的内容，无论是字段输入还是小箭头，但我能够让它像这样工作。

小提琴：http://jsfiddle.net/nusjua9s/4/

JS：

(function($) {

    var methods = {
        cycle: function() {
            if (this.attributes.max && this.attributes.min) {
                var val = this.value;
                var min = parseInt(this.attributes.min.value, 10);
                var max = parseInt(this.attributes.max.value, 10);
                if (val === this.attributes.max.value) {
                    this.value = min + 1;
                } else if (val === this.attributes.min.value) {
                    this.value = max - 1;
                } else if (!(val > min && val < max)) {
                    // Handle values being typed in that are out of range
                    this.value = $(this).attr('data-default');
                }
            }
        }
    };

    $.fn.circularRange = function() {
        return this.each(function() {
            if (this.attributes.max && this.attributes.min) {
                var $this = $(this);
                var defaultVal = this.value;
                var min = parseInt(this.attributes.min.value, 10);
                var max = parseInt(this.attributes.max.value, 10);
                $this.attr('min', min - 1);
                $this.attr('max', max + 1);
                $this.attr('data-default', defaultVal);
                $this.on("change", methods.cycle);
            }
        });
    };

})(jQuery);

$("input[type='number']").circularRange();

HTML：

<input type="number" min="1" max="12" value="12" />

所以我不确定为什么我一直在考虑这个问题，但仍然没有解决你所看到的超出范围数字的闪光，我看不到。但现在至少设置html范围并不困惑。您可以不假思索地设置所需的范围，只需初始化type="number"字段。

Answer 6

尝试使用$（'input [type =“number”]'）。change（function（）{}）; ？没结果？

检测数字输入微调器点击

6 个答案: