Skip to content

Instantly share code, notes, and snippets.

@santhosh17s

santhosh17s/input-value-change-arrowKeys.html

Last active March 5, 2019 09:46
Show Gist options
  • Save santhosh17s/7e59927a04d566611ca9f78e6eb7bb54 to your computer and use it in GitHub Desktop.
Save santhosh17s/7e59927a04d566611ca9f78e6eb7bb54 to your computer and use it in GitHub Desktop.
Download ZIP
Input text value need to change based on arrow key - left & right change cursor position and up & down increment or decrements respectively
Raw
input-value-change-arrowKeys.html
<!DOCTYPE html>
<meta name="robots" content="noindex">
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<form>
<input type="text" value="7978.1238" id="ranger" tabindex="1">
</form>
<div class="">
<button id="focusLeft"> &#8592; </button>
<button id="valueUp"> &#8593; </button>
<button id="valueDown"> &#8595; </button>
<button id="focusRight"> &#8594; </button>
</div>
<script id="jsbin-javascript">
let ranger = document.getElementById('ranger');
let focusLeft = document.getElementById("focusLeft");
let valueUp = document.getElementById("valueUp");
let valueDown = document.getElementById("valueDown");
let focusRight = document.getElementById("focusRight");
let rangerLength = ranger.value.length;
let startPosition = 0;
let endPosition = 0;
let checkSelection = () => {
startPosition = ranger.selectionStart;
endPosition = ranger.selectionEnd;
// Check if you've selected text
if (startPosition == endPosition) {
ranger.setSelectionRange(0, 1);
}
}
let focusLeftFn = () => {
startPosition = ranger.selectionStart;
endPosition = ranger.selectionEnd;
//dot need to skip
let currValue = ranger.value;
let dotValue = +currValue.charAt(startPosition - 1);
ranger.focus();
if (isNaN(dotValue)) {
ranger.setSelectionRange(startPosition - 2, startPosition - 1);
} else if (startPosition > 0) {
ranger.setSelectionRange(startPosition - 1, startPosition);
}
}
let incrOrDecrFn = (incrOrDecr) => {
startPosition = ranger.selectionStart;
endPosition = ranger.selectionEnd;
let currValue = ranger.value;
let incrOrDecrBln = incrOrDecr;
//CURSOR POSITION BASED - TWO SEGMENT - DOT BEFORE & AFTER
let twoSegment = currValue.split('.');
let segmentValue = 0;
let total = 0;
let powerOf = 0
let firstSegmentLength = (twoSegment[0]).length;
let secondSegmentLength = (twoSegment[1]).length;
if (firstSegmentLength >= startPosition) {
powerOf = Math.pow(10, (firstSegmentLength - (startPosition + 1)));
segmentValue = +twoSegment[0];
//LIMITLESS
let first = parseInt(segmentValue / powerOf);
let frag = 0;
if (incrOrDecrBln) {
frag = first * powerOf + powerOf;
} else {
frag = first * powerOf - powerOf;
}
total = frag + (segmentValue % powerOf);
ranger.focus();
ranger.setRangeText(total, 0, firstSegmentLength, 'start');
ranger.setSelectionRange(startPosition, startPosition + 1);
} else {
let secondSegmentPosition = startPosition - (firstSegmentLength + 1);
segmentValue = +twoSegment[0]
let frag = 0;
let initVal = 0;
let decimalVal = 0;
if(secondSegmentPosition == 0) {
initVal = +(twoSegment[1]).substring(0, 1);
if(incrOrDecrBln) {
frag = initVal / 10 + 0.1;
} else {
frag = initVal / 10 - 0.1;
}
segmentValue += frag;
segmentValue = segmentValue.toFixed(1);
}
if(secondSegmentPosition == 1) {
initVal = +(twoSegment[1]).substring(0, 2);
if(incrOrDecrBln) {
frag = initVal / 100 + 0.01;
} else {
frag = initVal / 100 - 0.01;
}
segmentValue += frag;
segmentValue = segmentValue.toFixed(2);
}
if(secondSegmentPosition == 2) {
initVal = +(twoSegment[1]).substring(0, 3);
if(incrOrDecrBln) {
frag = initVal / 1000 + 0.001;
} else {
frag = initVal / 1000 - 0.001;
}
segmentValue += frag;
segmentValue = segmentValue.toFixed(3);
}
if(secondSegmentPosition == 3) {
initVal = +(twoSegment[1]).substring(0, 4);
if(incrOrDecrBln) {
frag = initVal / 10000 + 0.0001;
} else {
frag = initVal / 10000 - 0.0001;
}
segmentValue += frag;
segmentValue = segmentValue.toFixed(4);
}
ranger.focus();
ranger.setRangeText(segmentValue, 0, startPosition+1, 'start');
ranger.setSelectionRange(startPosition, startPosition + 1);
}
}
let focusRightFn = () => {
startPosition = ranger.selectionStart;
endPosition = ranger.selectionEnd;
rangerLength = ranger.value.length;
//dot need to skip
let currValue = ranger.value;
let dotValue = +currValue.charAt(endPosition);
ranger.focus();
if (isNaN(dotValue)) {
ranger.setSelectionRange(startPosition + 2, startPosition + 3);
} else if (startPosition < rangerLength - 1) {
ranger.setSelectionRange(startPosition + 1, startPosition + 2);
}
}
function checkKeyEvent(event) {
// handling Internet Explorer stupidity with window.event
// @see http://stackoverflow.com/a/3985882/517705
var keyDownEvent = event || window.event,
keycode = (keyDownEvent.which) ? keyDownEvent.which : keyDownEvent.keyCode;
let LEFT = 37,
UP = 38,
RIGHT = 39,
DOWN = 40;
switch (keycode) {
case LEFT:
event.preventDefault();
focusLeftFn();
break;
case UP:
event.preventDefault();
incrOrDecrFn(true);
break;
case RIGHT:
event.preventDefault();
focusRightFn();
break;
case DOWN:
event.preventDefault();
incrOrDecrFn(false);
break;
default:
break;
}
}
let initialize = () => {
//Initial value select
ranger.focus();
ranger.setSelectionRange(0, 1);
document.onkeydown = checkKeyEvent;
}
initialize();
focusLeft.addEventListener("click", focusLeftFn, false);
valueUp.addEventListener("click", () => incrOrDecrFn(true), false);
valueDown.addEventListener("click", () => incrOrDecrFn(false), false);
focusRight.addEventListener("click", focusRightFn, false);
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment