14

I'm performing some form of validation on a freely typed input text field in HTML. Is there a way to highlight certain words or phrases (based on certain criteria) in a input text field using JQuery or JavaScript?

user6123723
  • 10,546
  • 18
  • 67
  • 109
  • 1
    Have you looked at similar questions like this http://stackoverflow.com/questions/119441/highlight-a-word-with-jquery or that http://stackoverflow.com/questions/3318229/selecting-highlighting-text-with-a-different-color/3318257#3318257 ? – nuala Apr 26 '12 at 21:46
  • 2
    @yoshi: No, he requested highlighting a text input field. – Bergi Apr 26 '12 at 22:02
  • Similar question with an answer discussing several options: https://stackoverflow.com/questions/22131214/how-to-highlight-text-inside-an-input-field – chirlu Oct 09 '16 at 09:46
  • Tim's answer is good, but only partially correct. The solution he has proposed may be the only "native"-ish solution. However, you can use layered
    elements to accomplish what you're trying to do. See this jQuery plugin: https://github.com/garysieling/jquery-highlighttextarea
     – rinogo Dec 21 '13 at 00:00
  • This is great, but the background text area and the input scroll at different rates in Chrome (but not Firefox) when zoom != 100%. (You can get it to work in Chrome by scaling the shift of the textarea by the zoom, but that would break Firefox.) Is there a cross-browser fix? – ramcdougal Mar 26 '14 at 14:14
  • Thanks for your follow-up! I use this tool on an internal site where we don't have to be concerned about zoom issues (or even cross-browser issues, for that matter). So, I'm afraid I won't be able to help you. However, it is open-source... We welcome any contributions you can make! :) – rinogo Mar 26 '14 at 18:09
  • This is a really great plugin, however it doesn't work with resizable text-areas. :-( – jj2 Jan 22 '15 at 01:51
  • Did you try my "updated" version? I'm not sure if it will resolve the problem you're having, but it might be worth a shot! And if it doesn't work, free free to find the problem and submit a Pull Request! :) – rinogo Jan 22 '15 at 03:54

1 Answers1

18

Within a text input box, your only opportunity for highlighting just a part of the text is using the selection. You can do this in all modern browsers with the text box's selectionStart and selectionEnd properties, or setSelectionRange() method (no idea why both exist).

Live demo: http://jsfiddle.net/YNr7K/

Code:

var input = document.getElementById("textBoxId");
input.value = "Cup of tea";
input.setSelectionRange(0, 3); // Highlights "Cup"
input.focus();

In older versions of IE (< 9), you'll need to use one of their tiresome TextRanges. See this answer for a function that shows how to do this.

Community
  • 1
  • 1
Tim Down
  • 318,141
  • 75
  • 454
  • 536
  • +1 Tested on firefox for ubuntu 11.10 and it didn't work. Chrome work tho. http://jsfiddle.net/MvBeU/ – Guilherme David da Costa Apr 26 '12 at 22:03
  • 1
    @GuilhermeDaviddaCosta: It does work on Firefox generally. I think jsFiddle complicates things with its iframes and focus. I posted a working jsFiddle in my answer. – Tim Down Apr 26 '12 at 22:06
  • Hm, I agree. It worked with the button now. Thanks for clarifying for me. – Guilherme David da Costa Apr 26 '12 at 22:23
  • Thanks Tim Down! Is there a way to do multiple highlights like (1,3) (5,9) etc.. as user continues to type? I guess I can use this( with http://stackoverflow.com/questions/1481152/jquery-how-to-detect-a-textboxs-content-has-changed ) to get the desire effect – user6123723 Apr 26 '12 at 22:56
  • 1
    @user1324816: Not in a text input box using the selection API: you're limited to one range that you can specify programmatically (although Firefox does allow multiple selection by holding down the Ctrl key while dragging). You only other option is some kind of overlay, which will involving calculating widths of every character and could be extremely complicated, depending on your requirements. – Tim Down Apr 26 '12 at 23:23