JSFiddle - React, Tailwind, and code Playground
HTML
<div>
<input type="text" value="0" id="test-input"/>
<input type="button" value="Up!" class="test-buttons" id="test-up-button" />
<input type="button" value="Reset!" class="test-buttons" id="test-reset-button" />
</div>
CSS
div {
width: 300px;
margin: 50px auto 0;
}
#test-input {
padding: 2px 4px;
}
.test-buttons {
padding: 3px 8px;
}
JavaScript
var element = $('#test-input');
var interval;
$('#test-up-button').on({
mousedown : function(e) {
timeout = setTimeout( function(){
element.val(parseInt(element.val()) + 1);
interval = window.setInterval(function() {
if($('#test-up-button').attr('clicked') != 'true')
{
element.val(parseInt(element.val()) + 1);
$('#test-up-button').attr('clicked','true')
}
}, 200);
}, 400);
i
},
mouseup : function() {
window.clearTimeout(timeout);
window.clearInterval(interval);
$(this).attr('clicked','false')
}
});
$('#test-reset-button').on('click', function(e) {
element.val(0);
e.preventDefault();
});