javascript - 检测数字输入微调器点击

Question

我有一个带有 min="1" 和 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

我遇到的问题是我无法找到一种方法来检测输入中的箭头微调器是否已被单击，或者只是整个输入已被单击。现在它有一个问题，当您点击字段中的任意位置时，当值当前为 1 或 12

时，它会更改值

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

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>