Jquery Set cursor at the end of the highlight text

Question

I am working on my jquery code to highlight on the text to replace it with anchor tag.

When I click on the button to replace the highlight text with the anchor tag, I want to put the cursor at the end of that highlighted text, example: when I have the full text "My own selected text sentence" and I highlight on the text called "selected" then replace it with anchor tag then I want to put the cursor at the end of the "selected" text just before the "text".

When I highlight on the text called Selected and click on the modal, the text will show as this:

<span class="highlight">Selected</span>

So when I put the url in the input textbox and when I click on the ok button, it will replace the text with the anchor tag just like this:

<a href="http://www.google.com" target="_blank">Selected</a>

But I am unable to put the cursor just after the Selected before the text. Here is what I have tried:

highlight_text = '<span class="highlight">' + Text + '</span>';
anchor_tag = '<a href="' + linkURL + '" target="_blank">' + Text + '</a>';
$('#replyMessage').html($("#replyMessage").html().replace(highlight_text, anchor_tag));
placeAtEndOfText(document.querySelector('#replyMessage')

Here is the full code:

$(document).on('click', '#quick_insert-link', function(e) {

    e.preventDefault();
    var selected_text = window.getSelection ? '' + window.getSelection() : document.selection.createRange().text;

    if (selected_text) {
        highlightSelection();
        $('#quick_linkdialog-text').val(selected_text);
    }
});

$(document).on('click', '#quick_ok', function(e) {

    if ($('#quick_linkdialog-web-button').is(':checked')) {
        var selected_text = window.getSelection ? '' + window.getSelection() : document.selection.createRange().text;
        var linkURL = $('#quick_linkdialog-onweb-tab-input').val();
        var Text = $('#quick_linkdialog-text').val();
        $('.dialog_background_cover').remove();
        $('#quick_linkdialog').hide();
        $('#replyMessage').focus();


        if ($('#quick_linkdialog-onweb-tab-input').val().indexOf('http://') == -1) {
            //$('#replyMessage').focus();

            if(selectedNode != null && selectedNode.nodeName === 'A') {
                selectedNode.href = "http://"+linkURL;
                selectedNode.innerText = Text;
            }
            else {

                highlight_text = '<span class="highlight">' + Text + '</span>';
                anchor_tag = '<a href="' + linkURL + '" target="_blank">' + Text + '</a>';

                $('#replyMessage').html($("#replyMessage").html().replace(highlight_text, anchor_tag));
                placeAtEndOfText(document.querySelector('#replyMessage').find(anchor_tag));
                //document.execCommand('insertHTML', null, '<a href="' + linkURL + '" target="_blank">' + Text + '</a>');
            }
        }
    }
});



function highlightSelection() {
    var userSelection = window.getSelection();

    for(var i = 0; i < userSelection.rangeCount; i++) {
        highlightRange(userSelection.getRangeAt(i));
    }
}



function placeAtEndOfText(el) {

    el.focus();

    if (typeof window.getSelection != "undefined"
            && typeof document.createRange != 'undefined') {
        var range = document.createRange();
        range.selectNodeContents(el);
        range.collapse(false);
        var sel = window.getSelection();
        sel.removeAllRanges();
        sel.addRange(range);
    } else if (typeof document.body.createTextRange != 'undefined') {
        var textRange = document.body.createTextRange();
        textRange.moveToElementText(el);
        textRange.collapse(false);
        textRange.select();
    }
}

When I tried to use placeAtEndOfText function, it will only put the cursor at the end of the text just after "sentence" for the element #replyMessage. I am unable to put the cursor at the end of the "selected" when I try to use placeAtEndOfText function.

Can you please show me an example how I can put the cursor at the end of the text called selected after when I replaced with the anchor tag?

Thank you.

There are many questions here with lots of solutions, have you checked them? [Example 1](https://stackoverflow.com/questions/499126/jquery-set-cursor-position-in-text-area), [example 2](https://stackoverflow.com/questions/51294827/jquery-set-cursor-to-beginning-of-input-field-on-focus/51294910), [example 3](https://stackoverflow.com/questions/7368750/how-to-set-the-cursor-position-at-the-end-of-a-string-in-a-text-field-using-jque), [example 4](https://stackoverflow.com/questions/5755826/set-cursor-position-in-an-input-text-field) ... — Don't Panic, May 23 '20 at 00:14
should this be closed as a duplicate of one of those, or do they not help? — Don't Panic, May 24 '20 at 23:45

Jquery Set cursor at the end of the highlight text

0 Answers0