jQuery Virtual Keyboard - set Arrow LEFT and Arrow Right

Question

I have spent time to create a jQuery Virtual Keyboard which it is displaying when the focus is set to Input. I did almost all buttons from keyboard to work, but I had stucked to make function for keys: Arrow Left and Arrow Right.

Please people, who knows better jQuery help me to understand how shall I do these functions for Arrow left and Arrow right. Somehow I understand that it is needed to identify the position of cursor in the input field and it is needed somehow to moove it +1 or -1.

The sample details about my virtual keyboard please take a look here.

Solved:
I found the right solution. The final working SCRIPT is here.

something like changing the position of the cursor? If yes, This link can help you [Click Here](http://stackoverflow.com/questions/499126/jquery-set-cursor-position-in-text-area) — Dvir, Oct 13 '13 at 20:43
or you can use [jquery Caret](http://www.plugin.jquery.hk/my-plugins/jquery-caret-plugin) — Dvir, Oct 13 '13 at 20:47
I think it more complicated than to set a cursor position. The function needs to find where is the cursor position at the moment and than to change position with with +1 or -1 character. I uderstand that Caret might help. But I do not have enough experience to understand how to make the function which act as I describe above. Many thank for your efforts!!! — Sergiu Costas, Oct 13 '13 at 20:49
That's right. And that's what you need. You can use their code. just look how they implemented this. btw you keyboard look nice ;] — Dvir, Oct 13 '13 at 20:51
I tried today CARET - but I can not understand how I can move cursor from current position to one character left or right... the only think i could obtain to move cursor to START or to END of INPUT... — Sergiu Costas, Oct 13 '13 at 20:59
Is it possible to create a bookmarklet or js library from tge above jsfiddle? How? — user1788736, Jan 18 '18 at 17:29
@user1788736 - I did not have time before to build a JS library. I just create keyboard on the code. If you still need, we can talk separately about my experience :) https://pasteboard.co/H8v75Nt.png — Sergiu Costas, Feb 20 '18 at 10:43

score 1 · Answer 1 · edited May 23 '17 at 12:28

here an example:

function setSelectionRange(input, selectionStart, selectionEnd) {
  if (input.setSelectionRange) {
    input.focus();
    input.setSelectionRange(selectionStart, selectionEnd);
  }
  else if (input.createTextRange) {
    var range = input.createTextRange();
    range.collapse(true);
    range.moveEnd('character', selectionEnd);
    range.moveStart('character', selectionStart);
    range.select();
  }
}

function setCaretToPos (input, pos) {
  setSelectionRange(input, pos, pos);
}

credit to: CMS from this post

Edit:

function getCaretPos(input) {
    // Internet Explorer Caret Position (TextArea)
    if (document.selection && document.selection.createRange) {
        var range = document.selection.createRange();
        var bookmark = range.getBookmark();
        var caret_pos = bookmark.charCodeAt(2) - 2;
    } else {
        // Firefox Caret Position (TextArea)
        if (input.setSelectionRange)
            var caret_pos = input.selectionStart;
    }

    return caret_pos;
}

Credit to Pandincus from this post

jsFiddle

Thank you very much for your post - I met it already. This example is how to set Cursor to appear in position 4... but I need a way how to identify the current position and to move cursor to other position... your example might be useful in the second part... when, I have know where the cursor is positioned and then to change from current position to position I would like... — Sergiu Costas, Oct 13 '13 at 21:09
see my update man... If my answer helped you you can accept :] any way next time a little search on google was solving your problem in 2 minutes like i did. — Dvir, Oct 13 '13 at 21:15

jQuery Virtual Keyboard - set Arrow LEFT and Arrow Right

1 Answers1