How to check if text is highlighted (cross-browser)

Question

Is there a generic way in jQuery or JavaScript (most cross-browser compatible) to check if text has been highlighted?

I am working with an HTML <input type='text'> element. This is a Search box that allows specific formats while searching for a Project.

A user can input the following:

Project name, location, description, and other alpha numeric input
Project Number (all numeric)

On keydown I am filtering for various search formats. As it currently stands, if there are 10 characters entered, and they are all numeric, the input textbox will only allow for more characters to be entered if they are non-numeric. The reason for this is, our project numbers are 10 digits long, and in the case that a user is searching for a project number, we want to capture only the first 10 characters and ignore the rest.

My goal is to allow for users to find a project by project number, highlight the text they just entered, and then search for another project by it's project number (replacing the existing search text). However, because we are filtering for non-numeric input, the numbers aren't captured.

Here is how I am filtering for non-numerics:

if ($input.val().length == 10 && !isNaN($input.val().replace(' ', '#'))) {
  if ((e.which >= 48 && e.which <= 57) || (e.which >= 96 && e.which <= 105)) {
    return false;
  }
}

How can I modify this to ensure that if my text is highlighted, the input will allow for numeric input to replace the existing query?

See also https://stackoverflow.com/q/9065828/1066234 – Avatar Feb 02 '22 at 05:01 — Avatar, Feb 02 '22 at 05:01

score 8 · Accepted Answer · edited Dec 23 '19 at 05:14

8

You can use the Selection object :

var selection = window.getSelection();

See the documentation here : https://developer.mozilla.org/en-US/docs/Web/API/Selection

With this object, you can check the selected dom node (anchorNode). For example :

if ($(window.getSelection().anchorNode).attr('id') === 'something') { ... }

edited Dec 23 '19 at 05:14

CertainPerformance

356,069
52
309
320

answered Jun 20 '14 at 16:03

Magus

14,796
3
36
51

score 1 · Answer 2 · answered Oct 09 '19 at 09:45

Based on the above answer, here's the vanilla version.

document.addEventListener('click', function(){
    if (window.getSelection().anchorNode.parentElement.classList.contains('word')) {
    console.log('highlight');
    }
});

I would change 'document' to the wrapping container and 'word' to whatever class/ID is on the text you want to detect a highlight on.

How to check if text is highlighted (cross-browser)

2 Answers2

Linked