0

Trying to figure out how to properly detect if text is unselected.

In Firefox you can highlight text, click inside and it totally deselects.

In Chrome/Chromium if you click inside highlighted text that's still counted as selected until one more click (even though the visual highlight is gone).

How do we work around this?

JS / Jquery Code:

function getSelected() 
{
    var return_text;
    if (window.getSelection) 
    {
        return_text = window.getSelection();
    }
    else if (document.getSelection) 
    {
        return_text = document.getSelection();
    }
    return return_text;
}

$(document).on('click', "div", function(e) 
{
        var selection = getSelected();
        var selectedText = selection.toString();
        console.log(selectedText);
});

HTML for testing:

<div>
This is some text. Open your F12 console and select some text to test me<br />
<br />
In Chromium, the selected text stays until you click twice even though it is visually unselected on the first click. In Firefox, it clears properly on one click.<br />
<br />
Why is Chromium doing this? It's causing really annoying behaviour.
</div>

Example: https://jsfiddle.net/7sf35c4j/

From what I can see, this makes it basically impossible in Chrome/Chromium to accurately know when something is deselected???

NaughtySquid
  • 1,947
  • 3
  • 29
  • 44
  • 1
    There is an answer by @Patrick Evans on this post that works: (https://stackoverflow.com/questions/3731328/on-text-highlight-event) - using the native `selectionchange` event – Ryan Wilson Feb 21 '21 at 19:35
  • "Selection Text" requires either human interaction (click and drag cursor for instance) or script code that either emulates that or programmatically selects text. That is the impetus of Selection of text. So, in your example, the `click` event doesn't accomplish that requirement. Therefore, the proper way of determining if one of the required actions takes place is to use the correct event handler - the one that is triggered based upon the requirements: it is [selectionchange](https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onselectionchange). – Randy Casburn Feb 21 '21 at 19:45
  • Additionally, sure, mouse up works, because it emulates the click-n-drag stimulus by changing the startPoint of the 'range' – Randy Casburn Feb 21 '21 at 19:46
  • @Randy Casburn not sure what you're trying to say, the code clearly works with the click event but Chromium keeps the selected text for one additional click. – NaughtySquid Feb 21 '21 at 21:17
  • @Ryan Wilson, you're a winner. Seriously that's exactly what I needed. Annoying that the Click behaviour in Chrome is not as expected but that works! – NaughtySquid Feb 21 '21 at 21:26
  • @NaughtySquid Sometimes the simplest answer is to use what is already there. Taught me something new in finding that post as I didn't know that event existed. Glad I could help. Have a good day! – Ryan Wilson Feb 21 '21 at 21:28
  • The click event effects what is selected but does not trigger the `selectionchange` change event while the mouse events do. To be more precise, the _second click_ is a facade because the text is no longer "selected" so it reflects that. One `click` to remove selection (but not trigger `selectionchange`) and second click to realize that affect. – Randy Casburn Feb 21 '21 at 21:30
  • My next issue is to figure out how to get that only in a specific container @Ryan Wilson – NaughtySquid Feb 21 '21 at 21:57
  • @NaughtySquid Check this out, it works for single selection, but in Firefox I guess you can select multiple places at the same time, so I'm not sure how you would handle that case, maybe more searching would reveal a solution, but you can check this post out. The selected answer worked for me to get the container element of the highlighted text (https://stackoverflow.com/questions/7215479/get-parent-element-of-a-selected-text) – Ryan Wilson Feb 22 '21 at 13:39

0 Answers0