I recently made a similar control for another question (https://stackoverflow.com/questions/32411739/a-customised-number-input-in-html/32412318?noredirect=1#comment52802882_32412318), so I simply updated the script a little for your needs:
http://jsfiddle.net/v9u0couc/6/
function createSelection(field, start, end) {
if (field.createTextRange) {
var selRange = field.createTextRange();
selRange.collapse(true);
selRange.moveStart('character', start);
selRange.moveEnd('character', end);
selRange.select();
} else if (field.setSelectionRange) {
field.setSelectionRange(start, end);
} else if (field.selectionStart) {
field.selectionStart = start;
field.selectionEnd = end;
}
}
$("input.numberControl").on("keydown", function (e) {
var gotCode = false;
var curPos = this.selectionStart;
var endPos = this.selectionEnd;
if (endPos === curPos) endPos = curPos + 1;
// get the selected text
var cur = $(this).val().substring(curPos, endPos);
//check for negative numbers or comma
if (cur == '-' || cur == '.') {
endPos++;
cur = $(this).val().substring(curPos, endPos);
}
// we are not at a number - ignore
if (isNaN(cur) || cur.charAt(0) === ' ') {
// search the "other" way
endPos = curPos;
curPos = curPos - 1;
cur = $(this).val().substring(curPos, endPos);
}
if (isNaN(cur) || cur.charAt(0) === ' ' || cur === '') {
return;
}
// check the chars before and after to get the "whole" number
var start = curPos,
end = endPos;
while (start >= 0) {
cur = $(this).val().substring(start, endPos);
// found a cur that is "not" a number
if (cur !== '-' && (isNaN(cur) || cur.charAt(0) === ' ')) {
start++;
break;
}
start--;
}
while (end < $(this).val().length) {
cur = $(this).val().substring(curPos, end);
// found a cur that is "not" a number
if (isNaN(cur) || cur.charAt(cur.length - 1) === ' ') {
end--;
break;
}
end++;
}
// convert our number
cur = Number($(this).val().substring(start, end));
var before = $(this).val().substring(0, start);
var after = $(this).val().substring(end);
var origCurLen = ('' +cur).length;
// avoid adding extra stuff
if (e.keyCode == 38) {
cur++;
$(this).val(before + '' + cur + '' + after);
gotCode = true;
}
if (e.keyCode == 40) {
cur--;
$(this).val(before + '' + cur + '' + after);
gotCode = true;
}
var field = this;
// ignore default handling if we did something
if (gotCode) {
// adjust the selection
var curLen = ('' +cur).length;
if(curLen != origCurLen) {
end -= origCurLen - curLen;
}
window.setTimeout(function () {
createSelection(field, start, end);
}, 10);
e.preventDefault();
return false;
}
});
Note that I didnt do it for text-area, this I am sure you can figure out for yourself, since its just another check for a modifier (Alt=keyCode 18) in an onkeyUp/Down event.