JQuery/JavaScript - highlight a part of text from input or textarea

Question

Possible Duplicate:
How to highlight a part part of an Input text field in HTML using Javascript or JQuery

Does anyone know how to highlight some text in input[type=text] or textarea? Is it possible?

What exactly do you mean by "highlight text"? Just have it in a different color or select the text? — Felix Kling, Aug 17 '12 at 11:43
I've tried replace text, which I want to highlight, with element with background-color style. But after that input has this text with elem directly — Mirek, Aug 17 '12 at 11:47
if you just want to select the text use this `$('input[type=text]').select()`, or if you need background highlighting use `$('input[type=text]').css('background-color', '#FF0')`. — Vishal, Aug 17 '12 at 11:47
@Felix Kling I want to simply set background color for part of input text — Mirek, Aug 17 '12 at 11:48
@Mirek my answer highlights the text soon after clicking the button. if you want to highlight it during entering,simply use `css` styles like `color` and `background-color` — Bhuvan Rikka, Aug 17 '12 at 11:50

Ricardo Alvaro Lohmann · Accepted Answer · 2012-08-17T12:11:48.800

4

You have to place a div behind your textarea and then style it according to it's text.
Notes:

Set your textarea background-color to transparent to see your highlighter color.
Your highlighter have to be the same style and text content of your textarea to put the span on the right place.
Set your highlighter text to the same color of it's background or you'll see a <b> effect, the same for the span.

html:

<div class="highlighter">some text <span>highlighted</span> some text</div>
<textarea>some text highlighted some text</textarea>

css:

.highlighter, textarea {
    width: 400px;
    height: 300px;
    font-size: 10pt;
    font-family: 'verdana';
}

.highlighter {
    position: absolute;
    padding: 1px;
    margin-left: 1px;
    color: white;
}

.highlighter span {
    background: red;
    color: red;
}

textarea {
    position: relative;
    background-color: transparent;
}

demo

edited Aug 17 '12 at 12:11

answered Aug 17 '12 at 12:05

Ricardo Alvaro Lohmann

26,031
7
82
82

Thank you, this is what I need:) But it works correctly only if textarea has no scroll bars – Mirek Aug 17 '12 at 12:12
@Mirek Yes, I know, you have to do some workaround to scroll highlighter together when you scroll textarea. – Ricardo Alvaro Lohmann Aug 17 '12 at 12:13
If you'd like this in plugin form (that also works with scrollbars), check out: https://github.com/mistic100/jQuery-highlightTextarea – rinogo Dec 20 '13 at 23:56

score 2 · Answer 2 · answered Aug 17 '12 at 11:49

This code snippet shows you how:

window.onload = function() {
    var message = document.getElementById('message');
    // Select a portion of text
    createSelection(message, 0, 5);

    // get the selected portion of text
    var selectedText = message.value.substring(message.selectionStart, message.selectionEnd);
    alert(selectedText);
};

function createSelection(field, start, end) {
    if( field.createTextRange ) {
        var selRange = field.createTextRange();
        selRange.collapse(true);
        selRange.moveStart('character', start);
        selRange.moveEnd('character', end);
        selRange.select();
    } else if( field.setSelectionRange ) {
        field.setSelectionRange(start, end);
    } else if( field.selectionStart ) {
        field.selectionStart = start;
        field.selectionEnd = end;
    }
    field.focus();
}

JQuery/JavaScript - highlight a part of text from input or textarea

2 Answers2

Linked