How to maintain selection after click in HTML?

Question

I am coding a WYSIWYG editor (can't use something like TinyMCE - have to code myself) and I want users to be able to set the text as bold, underlined, links, etc by adding in tags to the HTML. The problem I've got is that when users select the text in the editable div and then click the 'Bold' button it is unable to find the selection because it has been deselected because the click event has happened. How can I stop this? Is there a better way to do this?

score 9 · Answer 1 · edited May 23 '17 at 12:08

9

You need to make the button unselectable, which can be done with CSS in most browsers and the unselectable attribute in IE and Opera. Here's how:

How to disable text selection highlighting using CSS?

edited May 23 '17 at 12:08

Community

1
1

answered Oct 22 '11 at 10:52

Tim Down

318,141
75
454
536

2

I think this is the best solution, as it actually maintains the selected text, instead of just saving it in memory. – smfoote Sep 03 '12 at 21:12

score 4 · Answer 2 · answered Aug 21 '13 at 17:59

4

Another, possibly better, way to achieve this is to call 'preventDefault()' on the 'mousedown' event for the 'Bold' button (which is when the selection gets cleared - at least in Chrome):

$('div.boldButton').mousedown(function(event) {
  event.preventDefault();
});

answered Aug 21 '13 at 17:59

Vijay Rudraraju

189
1
5

Almost neat. Sometimes it may not work, in which case, instead of `event.preventDefault()`, you simply call `return false;`.. – SexyBeast Oct 19 '13 at 01:45

scessor · Accepted Answer · 2011-10-24T10:55:30.757

This function can help you:

jQuery.fn.getSelectedText = function() {
    var sSelectedText = "";
    // all browsers, except IE before version 9
    if (window.getSelection) {
        var sTagName = this.get(0).tagName.toLowerCase();
        sSelectedText = (
            sTagName == 'input' || sTagName == 'textarea' ?
            this.val().substring (
                this.get(0).selectionStart
                , this.get(0).selectionEnd
            ) :
            document.getSelection().toString()
        );
    }
    // Internet Explorer before version 9
    else {
        if (document.selection.createRange) {
            sSelectedText = document.selection.createRange().text;
        }
    }
    return sSelectedText;
}

Also see my jsfiddle.

=== UPDATE ===

If your button isn't an <input type="button/submit" ... /> or a <button ...>, you have to remember the selected text after each click:

var sSelectedText = '';
$('body').click(function() {
    sSelectedText = $('#text').getSelectedText();
});
$('body').dblclick(function() {
    sSelectedText = $('#text').getSelectedText();
});

On button click the selected text is in sSelectedText:

$('#button').click(function(e) {
    alert(sSelectedText);
});

Also see my new jsfiddle.

@TimDown Ok, sorry, didn't read the complete question. The button doesn't seem to be a `` or a ` — scessor, Oct 24 '11 at 09:34

score 0 · Answer 4 · answered Oct 22 '11 at 10:22

0

one idea is to keep track of the selection (by listening to mouseup events), so that your code knows what is highlighted at and given moment, so you can do something with it when the button is clicked...

This article has some good code examples.

answered Oct 22 '11 at 10:22

Hoff

38,776
17
74
99

How to maintain selection after click in HTML?

4 Answers4

Linked