Selecting text within a DIV, changing button when text is highlighted (deselect when its unhighlighted)

Question

I have this script from fiddle: http://jsfiddle.net/83T7U/5/. It changes the button name from 'Reply' to 'Quote' when some text is selected within a specific DIV. However, it only works on clear text (ie. without any span, bold, italic, etc. tags).

I'd like to change this script so that it works with HTML tags too. So the approach needs to be changed and the easiest way should be to target the button, not parent/child text within a DIV.

So I created a new script (but it's not complete): http://jsfiddle.net/c8UbV/ that should change button name from 'Reply' to 'Quote' as soon as a text within a DIV is highlighted (and change it back to Reply when text is unhighlighted). But it's not working (because it's not complete...). How would it be possible to make it work correctly?

HTML:

<div id="m2560" class="yellow">DIV1: First <span style="color:red">some red text for</span> you to select
<br>
<button id="msg2560">Reply</button>
</div>
<br>
    <div id="m2900" class="green">DIV2: <b>Second some bold</b> test text for you to select
<br>
<button id="m2900">Reply</button>
</div>
<br>
    <div id="msg3022" class="blue">DIV3: <i>Third some italic test</i> text for you to select
<br>
<button id="msg3022">Reply</button>
</div>

JavaScript:

function changeButton() {
// for now this script only checks if text is selected
    var text = "";
    if (typeof window.getSelection != "undefined") {
//? it should probably be document.GetElementById('button_id').innerHTML='Quote';
    } else if (typeof document.selection != "undefined" && document.selection.type == "Text") {
//? it should probably be document.GetElementById('button_id').innerHTML='Quote';
    }
    return text;
}   
    document.GetElementById('msg***').onclick = changeButton;

score 1 · Answer 1 · edited May 23 '17 at 10:32

1

The original script you have is not far off. I would suggest using

a function that gets the selected text so that you can check the selection is non-empty
a function that gets you the container element of the selection
a function that checks whether an element has a particular class and
a function that gets the nearest container of a node (or the node itself) with a particular class (below).

The resulting code is longer than what you've got but is more logical, modular and readable.

Also, it's document.getElementById() rather than document.GetElementById().

Demo: http://jsfiddle.net/9zXg6/6/

Code not contained in linked answers:

function getSelfOrAncestorWithClass(node, theClass) {
    while (node) {
        if (hasClass(node, theClass)) {
            return node;
        } else {
            node = node.parentNode;
        }
    }
    return null;
}

edited May 23 '17 at 10:32

Community

1
1

answered Jul 05 '14 at 21:57

Tim Down

318,141
75
454
536

Thank you - but when you select both 'clear' and HTML text, for example: http://jsfiddle.net/9zXg6/2/ 'some bold' from the first DIV or 'some test' from third DIV, it seems it doesn't work.. – Jul 05 '14 at 22:12
@Gooden: Ah, it fails in Firefox but not Chrome. Curious and surprising. I'll get back to you. – Tim Down Jul 06 '14 at 17:57
@Gooden: The problem is in the original jsFiddle: the `click` event doesn't fire if the start and end nodes for the "click" (i.e. selection drag) are different. Use the `mouseup` event instead. See http://jsfiddle.net/9zXg6/6/. – Tim Down Jul 06 '14 at 18:02
Thanks - it seems to work better now -- onclick was on purpose though to make sure that when you click inside of the already highlighted element it changes the button to Reply (currently I think it doesn't change it to Reply, but it is a minor issue). – Jul 06 '14 at 18:07

Selecting text within a DIV, changing button when text is highlighted (deselect when its unhighlighted)

1 Answers1

Linked