Create button onclick function to act as arrow keys do

Question

I have this Java script function that acts as a back space. This works fine but now I want to create a button that goes back, and one that goes forward without deleting the text ( like the behavior of your arrow keys ) . Any help with this is greatly appreciated.

 function setBack() {
     document.getElementById('user').value = 
     document.getElementById('user').value.substring(0, 
     document.getElementById('user').value.length - 1);
 }

 <input id="user" type="text">
 <button type="button" onclick="setBack();">backspace</button>
 <button type="button" onclick="">back</button>
 <button type="button" onclick="">forward</button>

No jQuery please Native Javascript only.

this might help: http://www.codescratcher.com/javascript/get-or-set-cursor-position-in-a-textarea/ — ControlAltDel, Mar 22 '18 at 20:01
Have you checked @DavidShack 's answer? The jsFiddle works as you asked. — Munim Munna, Mar 26 '18 at 07:27
There was a related question: https://stackoverflow.com/questions/24115860/set-caret-position-at-a-specific-position-in-contenteditable-div — SirPeople, Mar 27 '18 at 12:57

David Shack · Answer 1 · 2018-04-03T19:21:47.047

4

Give this a try:

       
            let input = document.getElementById('Test');
            input.focus();
              
            let index = 0;

            document.getElementById('Prev').addEventListener('click', function(){
                
                index -= 1;
                
                if(index <= 0) {
                    index = input.value.length;
                }

                input.focus();
                input.selectionEnd = index;
                input.selectionStart = index;
            });


            document.getElementById('Next').addEventListener('click', function(){
                console.log(index);
                
                index += 1;
                
                if(index > input.value.length) {
                    index = 0;
                }

                input.focus();
                input.selectionEnd = index;
                input.selectionStart = index;
            });

        <input id="Test" type="text" value="helloooo">
        <button id="Prev">Prev</button>
        <button id="Next">Next</button>

edited Apr 03 '18 at 19:21

answered Mar 24 '18 at 01:23

David Shack

131
4

It is appreciated to post answer in snippets rather than `jsFiddle` as OP understands it better and it is much appreciated by the community. – Munim Munna Mar 26 '18 at 07:31
Like @manikant gautam answer this is close to what I want except the fact that when you type then press back works fine but if i type then hit back again it jumps to the previous point where you began instead of moving back one space. – Jonny Mar 28 '18 at 01:13
in other words if i type, click back, type again, then click back again it doesn't move one space back but before the new text. – Jonny Mar 28 '18 at 01:15
@MunimMunna Thank you. I've updated my post to reflect your suggestion. – David Shack Apr 03 '18 at 19:24
@Jonny You can add an keyup event listener to update the cursor position after adding/removing characters. – David Shack Apr 03 '18 at 19:25

score 2 · Accepted Answer · answered Mar 27 '18 at 08:34

You can do that by obtaining the cursor location which is possible with selectionStart. Here is the sample code. You can add more features to this as per the requirement.

function back(){

                console.log(user.selectionStart-1)
                if(user.selectionStart !== 0 ){
                user.focus();
                user.selectionEnd = user.selectionStart
                user.selectionStart = user.selectionStart-1
                }

            }
function forward(){

                console.log(user.selectionStart)
                user.focus()
                user.selectionEnd = user.selectionStart+1
                user.selectionStart = user.selectionStart+1

            }

This works great except it highlights the char when it moves back but it doesnt do that with forward button. If it didnt highlight the text it would be fine. — Jonny, Mar 27 '18 at 16:05
if you add the -1 to user.selectionEnd = user.selectionStart instead of ser.selectionStart = user.selectionStart it solves the hi-light problem. — Jonny, Mar 28 '18 at 02:49

manikant gautam · Answer 3 · 2018-03-27T11:56:20.887

You can store caret position inside var say caretPosition . And pass caret position after back and forward. Just increment pos on forward and decrement pos on back. here is how i have tried.

var caretPosition = 0;
function updateLength(){
  caretPosition =  document.getElementById('user').value.length 
}
function setBack(e) {
     var str= document.getElementById('user').value;
     var position =document.getElementById('user').selectionStart;
     caretPosition = position-1;
     document.getElementById('user').value = 
     str.substring(0,position - 1) + str.substring(position, str.length)
     resetCaretPosition('user',caretPosition);
    
 }
 function back(){
   caretPosition =(caretPosition>1)?caretPosition-1:caretPosition ;
   resetCaretPosition('user',caretPosition);
}
 
 function forward(){
   caretPosition =caretPosition+1 ;
   resetCaretPosition('user',caretPosition);
 }
 function resetCaretPosition(elemId, caretPos){
    var elem = document.getElementById(elemId);
    if(elem != null) {
        if(elem.createTextRange) {
            var range = elem.createTextRange();
            range.move('character', caretPos);
            range.select();
        }
        else {
            if(elem.selectionStart) {
                elem.focus();
                elem.setSelectionRange(caretPos, caretPos);
            }
            else
                elem.focus();
        }
    }
}

<input id="user" oninput="updateLength()"  type="text">
 <button type="button" onclick="setBack(event);">backspace</button>
 <button type="button" onclick="back()">back</button>
 <button type="button" onclick="forward()">forward</button>

in other words if i type, click back, type again, then click back again it doesn't move one space back but before the new text. This has the same bug as @David Shacks answer — Jonny, Mar 28 '18 at 01:17

Create button onclick function to act as arrow keys do

3 Answers3