JSFiddle - React, Tailwind, and code Playground
HTML
<input class="spinbox_arrows_down" type="button" value="DOWN"/>
<input id="spinfield_1" type="textbox" value="3"/>
<input class="spinbox_arrows_up" type="button" value="UP"/>
JavaScript
$(function () {
var spinfield = $('#spinfield_1');
$('.spinbox_arrows_up')
.mousedown( function() { $(this).spin(1); })
.mouseup( function() { window.clearInterval(interval); });
$('.spinbox_arrows_down')
.mousedown( function() { $(this).spin(-1); })
.mouseup( function() { window.clearInterval(interval); });
$.fn.spin = function (num) {
interval = setInterval( function() {
var value = spinfield.val();
num = value <= 23 ? 0 : num;
spinfield.attr('value', value + num);
},100)
}
})
/*
$(document).ready( function() {
var $spinfocus = $('#spinfield_1'), boxout = true, fieldout = true, interval;
$('.spinbox_arrows_up, .spinbox_arrows_down').mousedown( function() {
fieldout = false;
var $this = $(this);
interval = setInterval( function() {
arrowsClicked($this);
},100);
}).mouseup( function() {
fieldout = true;
window.clearInterval(interval);
});
});
function arrowsClicked($this) {
if ($('#spinfield_1:focus').length != 0) {
if ($this.hasClass('spinbox_arrows_up')) {
if ($('#spinfield_1').text() <= 23) {
$('#spinfield_1').text($('#spinfield_1').text() -1 +2);
}
} else {
if ($('#spinfield_1').text() > 0) {
$('#spinfield_1').text($('#spinfield_1').text() -1);
}
}
validateSpinbox($('#spinfield_1'));
} else if ($('#spinfield_2:focus').length != 0) {
if ($this.hasClass('spinbox_arrows_up')) {
if ($('#spinfield_2').text() <= 59) {
$('#spinfield_2').text($('#spinfield_2').text() -1 +2);
} else {
$('#spinfield_1').text($('#spinfield_1').text() -1 +2);
}
} else {
if ($('#spinfield_2').text() > 0) {
$('#spinfield_2').text($('#spinfield_2').text() -1);
}
}
...