CODEWITHSUNDEEP
javascriptjqueryhtml
Juicy
Juicy

Reputation: 12520

Prevent loss of highlight when clicking on other element

I'm working on a blog where I want a section to add a post. I'm imagining it very similar to the StackExchange editor I'm using right now to write this post.

I've managed to work with the textarea to get things like current caret position, insert at position, etc.

The problem I'm running into now is not losing the highlighted text in the textarea when the user clicks on another element, ie: the bold tool.

By default (at least in Chrome) when you highlight text in a textarea and then click elsewhere on the page, the textarea loses focus and the highlighted text with it.

Upvotes: 0

Views: 1793

Answers (1)

Rafael
Rafael

Reputation: 1223

When the textarea loses focus it will by default lose any previous selection, so at the onblur event you can save the current selection using the following function:

    function getSelectedText() {
        var txtarea = document.getElementById(textBoxScript);
        var start = txtarea.selectionStart;
        var finish = txtarea.selectionEnd;
        var sel = txtarea.value.substring(start, finish);
        return sel;
    }

And to set it back on focus event you can use the following function:

    function selectText(startPos, endPos, tarea) {
        // Chrome / Firefox
        if (typeof (tarea.selectionStart) != "undefined") {
            tarea.focus();
            tarea.selectionStart = startPos;
            tarea.selectionEnd = endPos;
            return true;
        }
        // IE
       if (document.selection && document.selection.createRange) {
            tarea.focus();
            tarea.select();
            var range = document.selection.createRange();
            range.collapse(true);
            range.moveEnd("character", endPos);
            range.moveStart("character", startPos);
            range.select();
            return true;
       }
    }

Upvotes: 1

Related Questions