Preserve text selection in contenteditable while interacting with jQuery UI Dialog and text input

Question

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?

Tim Down · Accepted Answer · 2010-07-23 08:23:17Z

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(); } } }

How do we use these function in practice. On a div item let's say <div contenteditable="true">test test</div>
I used the selectionChange event. See here stackoverflow.com/questions/21730134 I used Dart but you should get the idea.
@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
Have you found suitable events for this use case that work on more browsers?
@GünterZöchbauer: No, but using mousedown instead of click on the button gets round the issue.

Collectives™ on Stack Overflow

Preserve text selection in contenteditable while interacting with jQuery UI Dialog and text input

1 Answer 1

6 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Linked

Related