我有一个简单的数字输入,其中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时,当您单击字段中的任何位置时它会更改值
有没有办法检测文本字段中的微调器/箭头上是否发生了单击事件？
解决方法
我想这就是你真正想要的.
<input type="time" value="01:00" step="600"/>
目前没有本地方法来捕获与输入框事件分开的箭头输入事件.使用数字输入的所有内容似乎都有点hacky用于此目的.
下一个最佳选择就像http://jdewit.github.io/bootstrap-timepicker/