【发布时间】：2015-12-03 17:14:49
【问题描述】：
我有一个简单的数字输入，带有 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" />我遇到的问题是，我找不到一种方法来检测输入中的箭头微调器是否已被单击，或者只是整个输入已被单击。现在它有一个问题，当您单击字段中的任意位置时，当值当前位于 1 或 12 时，它会更改值
有没有办法检测点击事件是否发生在文本字段中的微调器/箭头上？
【问题讨论】：
-
onchange事件运行良好 jsfiddle.net/29bea3y0 -
@Ramanlfc 不，不是。我无法像上面的演示那样循环回到最小/最大值。
-
也许这里的答案，关于如何获取鼠标坐标可以与你已有的结合使用：stackoverflow.com/questions/7790725/…
-
我也看过使用 this.style.cursor，但它总是返回 ""，和 $(this).css('cursor')，但它总是返回 "text"，无论是不是你超过了向上/向下箭头。
标签： javascript html