js-hotkeys adding letter to the middle of a word in a form

Question

I am setting up a form for entering Spanish Verbs. I want to be able to use js-hotkeys plugin to create a shortcut to add accented letters.

I have this so far

    $('#presentTense input').bind('keyup', 'Ctrl+a', function () {
        this.value = this.value + ('á');
    });

which is fine as they are typing and it adds the accented letter to the end of what they have typed. The problem is that if they want to go back and insert an accented letter into the middle of a word that has already been typed to fix an error or omission, this method adds the accented letter to the end of the word.

Can anyone tell me a method to use to insert the letter where the cursor is whether at the end or in the middle of a word in an input text field?

score 0 · Answer 1 · edited May 23 '17 at 10:26

Hi I found this snippet in this question

(function($) {
    $.fn.getCursorPosition = function() {
        var input = this.get(0);
        if (!input) return; // No (input) element found
        if ('selectionStart' in input) {
            // Standard-compliant browsers
            return input.selectionStart;
        } else if (document.selection) {
            // IE
            input.focus();
            var sel = document.selection.createRange();
            var selLen = document.selection.createRange().text.length;
            sel.moveStart('character', -input.value.length);
            return sel.text.length - selLen;
        }
    }
})(jQuery);

this will enable you to find the cursor position at the word like this:

$('#presentTense input').getCursorPosition();

after that you only have to treat the string as an array and insert the value there and shift the rest to the right.

Sorry, but I used this verbatim and no matter where I put the cursor in the string, it returned a value of 0. It could be that I am not understanding something. — Zemplate, Dec 23 '14 at 23:27
I found that I was using that snippet you show in another application and it was working quite nicely. I need to look at how I am using it with the hot keys and see what is going wrong. Thanks. — Zemplate, Dec 24 '14 at 23:36

Academia · Answer 2 · 2014-12-24T15:20:10.580

You can use a plugin to get the caret position. There are many, but almost all of them are using browser() method, this method has been deprecated since jQuery 1.3 and has been removed in 1.9. Let's use a recent one called jQuery Caret Plugin, by this way we'll not have to use jquery migration to mitigate the fact that browser() method has been removed.

You'll also have to bind the event handler to the keydown, instead of keyup to get the correct caret position.

$('#presentTense').bind('keydown', 'Ctrl+a', function (event) {
        event.preventDefault();
        var start = $(this).range()["start"];
        var end = $(this).range()["end"];
        var len = this.value.length;
        this.value = [this.value.slice(0,start), 
                      'á',
                      this.value.slice(end,len)].join('');
        $(this).caret(start);
});

#presentTense is the input id in <input id="presentTense"/>.

event.preventDefault(); to prevent the default action of Ctrl+a, which is selecting the whole text.

$(this).caret(start); to position the caret like it was before executing the event handler.

To get this code works, you'll need to include jQuery, js-hotkeys and jQuery Caret Plugin.

The script proposed can insert the symbol 'á' at any caret position, can also replace selected text with the symbol.

Check out this DEMO to see how it's working.

Hope it's useful!

js-hotkeys adding letter to the middle of a word in a form

2 Answers2