jQuery: Add letter from virtual keyboard to the caret position in the input box

Question

I'm learning jquery and creating a virtual keyboard (to input special characters) for an input textbox. I managed to add the letter on click event to the input at the caret position that the user clicked.

$('#keyboard #e_specchar').click(function(){
   var $this = $(this);
   var caret = document.getElementById('input').selectionStart; 
   var character = $this.html(); 
   var textAreaStr = $('#input').val();
   $("#input").val(textAreaStr.substring(0, caret) + character + textAreaStr.substring(caret) );
});

However this has some drawbacks too, such as unable to replace the highlighted characters - instead the special characters would appear right next to it; or the caret always jumped to the last position of the input box after a click.

I'm wondering if there is a way to, at least, prevent the caret to jump to the last position after creating a letter from the click event?

Are you saying that you want to be able to select multiple characters and replace them with the special character by clicking the button? — IronFlare, May 04 '15 at 23:49
You could try rerunning the substring methods you ran prior to clicking by using on mouseup, and then then add +1 to the length. — Hunter Frazier, May 04 '15 at 23:55

score 1 · Accepted Answer · answered May 05 '15 at 00:00

The following code allows you to select multiple characters and replace all of them by clicking the button. Additionally, it will place the cursor directly after the point where the special character is inserted.

Note: I replaced $this = $(this) in favor of just using $(this).html(); in the textAreaStr variable assignment only because it shortens the code, not because your method was incorrect.

$('#e_specchar').click(function(){
    var selStart = $("#input")[0].selectionStart;
    var selEnd = $("#input")[0].selectionEnd;
    var character = $(this).html(); 
    var textAreaStr = $('#input').val();
    var value = textAreaStr.substring(0, selStart) + character + textAreaStr.substring(selEnd);
    $("#input").val(value).focus();
    $("#input")[0].selectionStart = selStart+1, $("#input")[0].selectionEnd = selStart+1;
});

DEMO

score 1 · Answer 2 · edited May 23 '17 at 11:58

To keep the caret in the position after the new added character, you can use the code in the accepted answer on this question.

To replace selected characters, you should also check the selectionEnd and compare if it is different to the selectionStart of an input. If so, change your code so the last substring starts from the selectionEnd instead of the selectionStart. Example:

$('.btn').click(function(){
   var $this = $(this);
   var caret = document.getElementById('input').selectionStart;
   var caretEnd = document.getElementById('input').selectionEnd;
   var character = $this.val(); 
   var textAreaStr = $('#input').val();
   $("#input").val(textAreaStr.substring(0, caret) + character + textAreaStr.substring(caretEnd) );
    setCaretPosition('input', caret+1);
});

JSFiddle Demo

jQuery: Add letter from virtual keyboard to the caret position in the input box

2 Answers2