highlight a word in input field

Question

I have a standard input field:

<input type='text' id='txt'>

And let's say the contents are foo bar.

Now, I want to be able to dynamically, with javascript/jQuery highlight the word 'bar' in that input field. I've tried using things such as $('#txt').setSelectionStart(5); or $('#txt').selectionStart(5);, but nothing seems to work. How can I do this? All the examples point to code within the $('#txt').select() scope, but I need to be able to change it from other places.

Edit By highlight I mean select or highlight a word in the same way you would select a word with your mouse to edit it or copy. I do not mean to simply color the word differently.

Second Edit After an entire morning, I finally managed it. My big hangup was not preventing default when pressing an arrow key. here is the jsfiddle: http://jsfiddle.net/31mts93v/3/

Try using Rich Text box: This link might help you "http://stackoverflow.com/questions/6403902/making-specific-text-bolded-in-a-textbox" . — Rohit Arora, Mar 20 '15 at 09:06
setSelectionRange has 2 or 3 arguments. (selectionStart, selectionEnd, [optional] selectionDirection); ex: an input with an id='a' has the value 'foo bar' if you run the code document.getElementById("a")setSelectionRange(0, 3) then 'foo' will be selected — avnaveen, Mar 20 '15 at 09:52

score 6 · Answer 1 · answered Mar 20 '15 at 09:20

html is not allowed in input type text or textarea.

One way to do this would be to have a content editable div and then search for the text and add a highlight class to the matched text.

For ex.

$('#keyWord').on('input', function (e) {
    var text = $(this).val();
    // escaping string for use in regex
    text = text.replace(/[\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|]/g, "\\$&");
    var re = new RegExp(text, 'gi');
 
    $('#test').children().each(function () {
        // if no text input clear out previous .highlight spans
        if(!text){
            $(this).html($(this).text());
            return;
        }
        // if match for regex insert .highlight class
        $(this).html($(this).text().replace(re, function(match){
            return '<span class="highlight">'+ match   +'</span>';
        })); 
    });
});

   .highlight{
  background: red;
}
#test{
  border: 1px solid blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="parent">
<div contenteditable="true" id="test">
<p>This is bar</p>
</div>
</div>
Search text: <input type="text" id="keyWord" />

Hmm! I suppose I could use a content editable DIV. I shall give that a go. Thanks! — Chud37, Mar 20 '15 at 09:28
I'm sorry It appears I was not clear enough in my question. Please see again - I meant highlight as you would with a mouse to edit or copy text. — Chud37, Mar 20 '15 at 09:33
Oh. In that case please refer to this [answer](http://stackoverflow.com/questions/646611/programmatically-selecting-partial-text-in-an-input-field) — Sami, Mar 20 '15 at 10:04

avnaveen · Answer 2 · 2015-03-20T12:08:26.813

4

Check this Link

This is a jquery plugin and this might help you in achieving your result.

I have used some string functions and setSelectionRange in order to select the text inside a text box.

HTML

<input type="button" value="Select" onmousedown="selectCup(); return false">
 <input type="text" id="select_text">

Js

function selectCup() {

    var search_text = document.getElementById("select_text").value;
    var n = search_text.length;
    var input = document.getElementById("test");
    var input_text = input.value;
    var x = input_text.indexOf(search_text);
    var y = x+n;
    input.focus();
    input.setSelectionRange(x, y); // Highlights "Cup"
};

I have udated in this fiddle

edited Mar 20 '15 at 12:08

answered Mar 20 '15 at 09:15

avnaveen

562
2
4
10

Sorry, I don't want to highlight, I want to select the word. As in the same way you would 'select' or 'highlight' a word with your mouse. – Chud37 Mar 20 '15 at 09:31
I have created a fiddle and updated the above post. Please check it. Note: this will select only the first occurrence of the text. and it is case sensitive. – avnaveen Mar 20 '15 at 12:09

highlight a word in input field

2 Answers2

Linked

Related