How could i make a button behave like the back arrow key does?

Question

I would like to know how to create a back button to move back through the characters of an input? I got a backspace to work but am having trouble with moving back without deleting chars.

function setBack(){document.getElementById('someText').value = document.getElementById('someText').value.substring(0, document.getElementById('someText').value.length - 1);}
function setOne(){ document.getElementById('someText').value += "A"; }
function setTwo(){ document.getElementById('someText').value += "B"; }
function moveBack(){document.getElementById('someText').value = document.getElementById('someText').value.substring(0, document.getElementById('someText').value.length - 1);}

.inputUser{
width:55%;
float:left; 
margin-top:3%;
border:0px;
overflow-x:scroll;
text-align:left;
border:1px #000000 solid;
}

<input id="someText" class="inputUser" type="text" readonly dir="rtl">

<div>
<button onclick="setOne();">A</button>
<button onclick="setTwo();">B</button>
<button onclick="setBack();">Backspace</button>
<button onclick="moveBack();">back</button>
</div>

No jQuery please. Thank You!

I deleted my original comment asking you to share your attempt when you added the`moveBack()` function to your question, however at closer glance, it's identical to your backspace function. It doesn't do anything related to moving back. Additionally, how do you "move back" when your cursor is never in the input to begin with? You should probably `focus()` the input at some point. That all in mind, have you made any attempts for the `moveBack()` function that you can share with us? — Tyler Roper, Dec 03 '18 at 18:38
yes i am stuck because their isn't a carrot position. with this the backspace is closest i have come to a actual back button. I was trying to create a back button when i created the backspace button. — Jonny, Dec 03 '18 at 18:40
https://www.google.nl/search?q=move+caret+textfield+javascript+site:stackoverflow.com — mplungjan, Dec 03 '18 at 18:48
@mplungjan This is no duplicate there is no carrot position in the text field so i cant move the carrot position. observe the snippet. Keyboard is disabled and text is only placed by javascript onclick. I stated in the comment above their is no carrot position — Jonny, Dec 03 '18 at 18:57
Is there a reason you aren't focusing the input so that you *could* use a caret position? — Tyler Roper, Dec 03 '18 at 19:06
I figured it out with some research and help from other stack pages. Thank all of you for leading me in the right direction — Jonny, Dec 03 '18 at 23:26
@TylerRoper thank you for pointing me in the right direction. — Jonny, Dec 04 '18 at 03:22

score 0 · Accepted Answer · answered Dec 03 '18 at 23:24

I figured it out i had to set focus and get the caret position, then i could move the caret around. I had help from this stack answer Get caret position in HTML input? by user Tim Down.

function focus(){
var foo =document.getElementById('someText');
foo.focus();
foo.setSelectionRange(foo.value.length,foo.value.length);
inputLen = document.getElementById('someText').value.length;
}
function setBack(){document.getElementById('someText').value = document.getElementById('someText').value.substring(0, document.getElementById('someText').value.length - 1);focus();}
function setOne(){ document.getElementById('someText').value += "A";focus(); }
function setTwo(){ document.getElementById('someText').value += "B";focus(); }
   
function moveBack(){
var elem = document.getElementById('someText');
elem.setSelectionRange(elem.value.length,  getInputSelection(elem).start - 1 );
elem.focus();}
function getInputSelection(el) {
var start = 0, end = 0, normalizedValue, range,
textInputRange, len, endRange;
if (typeof el.selectionStart == "number" && typeof el.selectionEnd == "number") {
start = el.selectionStart;
end = el.selectionEnd;
} else {
range = document.selection.createRange();
if (range && range.parentElement() == el) {
len = el.value.length;
normalizedValue = el.value.replace(/\r\n/g, "\n");
textInputRange = el.createTextRange();
textInputRange.moveToBookmark(range.getBookmark());
endRange = el.createTextRange();
endRange.collapse(false);
if (textInputRange.compareEndPoints("StartToEnd", endRange) > -1) {
start = end = len;
} else {
start = -textInputRange.moveStart("character", -len);
start += normalizedValue.slice(0, start).split("\n").length - 1;
if (textInputRange.compareEndPoints("EndToEnd", endRange) > -1) {
end = len;
} else {
end = -textInputRange.moveEnd("character", -len);
end += normalizedValue.slice(0, end).split("\n").length - 1;}}}}
return {start: start, end: end};}

.inputUser{
width:55%;
float:left; 
margin-top:3%;
border:0px;
overflow-x:scroll;
text-align:left;
border:1px #000000 solid;
}

<input id="someText" class="inputUser" type="text" readonly dir="rtl">

<div>
<button onclick="setOne();">A</button>
<button onclick="setTwo();">B</button>
<button onclick="setBack();">Backspace</button>
<button onclick="moveBack();">back</button>
</div>

How could i make a button behave like the back arrow key does?

1 Answers1