19

I am trying to figure out how to highlight just some part of text inside an input box using jQuery. It's quite simple to highlight the entire contents of the input box but how do you highlight just one word or couple of letters?

Thanks!

Lukasz
  • 8,710
  • 12
  • 44
  • 72
  • By "select", do you mean mark it as selected? Blue, with white text? – Kobi Jun 21 '10 at 14:30
  • 1
    What do you mean by _select_? Do you mean highlight like what happens when you select with your cursor? – Kekoa Jun 21 '10 at 14:31
  • I fixed the wording. I used the word select but what I really meant was highlight. I apologize for the mistake. – Lukasz Jun 22 '10 at 14:58

2 Answers2

37

For text <input> elements, the following will do the job. The example selects just the word "two" in the input: 

function setInputSelection(input, startPos, endPos) {
    input.focus();
    if (typeof input.selectionStart != "undefined") {
        input.selectionStart = startPos;
        input.selectionEnd = endPos;
    } else if (document.selection && document.selection.createRange) {
        // IE branch
        input.select();
        var range = document.selection.createRange();
        range.collapse(true);
        range.moveEnd("character", endPos);
        range.moveStart("character", startPos);
        range.select();
    }
}

document.getElementById("setSelection").onmousedown = function() {
    var input = document.getElementById("i");
    setInputSelection(input, 4, 7);
    return false;
};
<input id="i" type="text" value="One two three">
<input type="button" value="Set selection" id="setSelection">
Tim Down
  • 318,141
  • 75
  • 454
  • 536
  • 1
    Honestly, I know this is not an educational comment, but come on IE, really!! 7 lines of code versus 2. Sure your way may add more functionality to the mix, but unnecessary. Thank you Tim for providing this example! – Jason Foglia Feb 01 '13 at 05:46
  • @JasonFoglia: The code for doing this reliably in old IE in textareas, where there could be empty lines, is [much bigger still](http://stackoverflow.com/a/3373056/96100). In fairness, IE 9 fixes this by supporting `selectionStart` and `selectionEnd`. – Tim Down Feb 01 '13 at 09:54
  • I know this is old but Firefox requires this `input.focus();` before `input.selectionStart = startPos;` – Bojan Dević Jul 09 '13 at 12:44
  • @BojanDević: Since textareas can have selections while not focussed in some browsers, I tend to try and keep the two things separate, but I think I agree with you for this question. – Tim Down Jul 09 '13 at 13:58
  • Looks like fiddle do not works in latest Firefox (44.0.2) – vatavale Feb 18 '16 at 13:51
  • 1
    @vatavale: The main code will work fine for many years to come but the jsFiddle has issues with focus. I've changed it to use a code snippet instead and added a button to set the selection. – Tim Down Feb 19 '16 at 09:54
-3

You will need to select the entire value, and then manipulate the string in code. Depending on what you're trying to do with the words, you might look in to using regular expressions to match certain words/letters.

Harold1983-
  • 3,329
  • 2
  • 23
  • 22