17

I have a jQuery dialog for making links in a contentEditable span. The problem is that clicking a button to open the dialog causes the selection to be lost, text input inside the dialog also causes the selection to be lost.

I can fix the button with -moz-user-select:none; but -webkit-user-select:none doesn't work in Chrome.

I can fix the input by wrapping it in an iframe, but that's messy and clicking anywhere else also kills the selection, for example, dragging the dialog around.

I've seen the solution at How to preserve text selection when opening a jQuery dialog, but that doesn't work in many browsers in a contenteditable element, only real inputs.

Is there a nice solution to my problem?

1 Answer 1

42

You could save and restore the selection using simple functions such as the following when the dialog is opened and closed. I am not familiar enough with jQuery dialogs to know the mechanism for hooking into the dialog opening and closing. The first, saveSelection, returns you a Range or TextRange object that you should store in a variable which you later pass to restoreSelection:

function saveSelection() {
    if (window.getSelection) {
        sel = window.getSelection();
        if (sel.getRangeAt && sel.rangeCount) {
            return sel.getRangeAt(0);
        }
    } else if (document.selection && document.selection.createRange) {
        return document.selection.createRange();
    }
    return null;
}

function restoreSelection(range) {
    if (range) {
        if (window.getSelection) {
            sel = window.getSelection();
            sel.removeAllRanges();
            sel.addRange(range);
        } else if (document.selection && range.select) {
            range.select();
        }
    }
}
7
  • 2
    How do we use these function in practice. On a div item let's say <div contenteditable="true">test test</div>
    – Hussein
    Commented Jan 14, 2011 at 4:46
  • I used the selectionChange event. See here stackoverflow.com/questions/21730134 I used Dart but you should get the idea. Commented Feb 12, 2014 at 17:32
  • @GünterZöchbauer: That's certainly a more viable option than it was in 2010 because WebKit has since implemented the selectionchange event on contenteditable. Firefox still hasn't though: bugzilla.mozilla.org/show_bug.cgi?id=571294
    – Tim Down
    Commented Feb 12, 2014 at 17:57
  • Have you found suitable events for this use case that work on more browsers? Commented Feb 12, 2014 at 17:59
  • 2
    @GünterZöchbauer: No, but using mousedown instead of click on the button gets round the issue.
    – Tim Down
    Commented Mar 31, 2014 at 21:19

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.