Highlighting input in textarea

Question

I'm trying to achieve a highlight effect in my textarea, basically as a user types a sentence, a background color is being added, similar to this effect: http://jsbin.com/josatozeyi/1/edit (I know it's the resizing of textarea but is there any other way?)

<textarea class='animated'>With CSS transition.</textarea>

Any suggestions?

ADDITIONAL INFO This is what I meant: http://prntscr.com/63xdi9

As long as it achieves the desired result and doesn't mess up the functionality of textarea then yes :) — KingAlfredChameleon, Feb 11 '15 at 20:48
i guess that's no if you use this textarea in a real form and can be submitted. — Stickers, Feb 11 '15 at 20:50
Yes, you're right I will be using the textarea in a form. I can't really think of anything either — KingAlfredChameleon, Feb 11 '15 at 20:51
possible duplicate of [Highlight text inside of a textarea](http://stackoverflow.com/questions/142527/highlight-text-inside-of-a-textarea) — Greg Rozmarynowycz, Feb 11 '15 at 21:21

score 1 · Answer 1 · answered Feb 11 '15 at 21:03

It's too complicated to me, however I found this, it might be useful:

highlightTextarea aim is to highlight portions of text into a textarea or a input. It can highlight a set of words or a specific range.

http://mistic100.github.io/jquery-highlighttextarea/

Source: mistic100

score 0 · Answer 2 · answered Feb 11 '15 at 20:29

0

Add a css rule that adds a background color to the textarea on focus.

input:focus { 
  background-color: yellow;
}

answered Feb 11 '15 at 20:29

Shan Robertson

2,742
3
25
43

Hi, this just makes the entire textarea background yellow, rather than just the text's specific background. – KingAlfredChameleon Feb 11 '15 at 20:33

Greg Rozmarynowycz · Answer 3 · 2015-02-11T21:03:10.320

0

You can achieve the affect you want with contenteditable span element, and then applying a background color on focus: http://jsfiddle.net/13L9zudf/

$(document).ready(function(){
  var defaultVal = "Type content here...";
  $("div.textbox span").keyup(function(){
      if($(this).html() == "")
      {
        $(this).html(defaultVal);
      }
    }).keydown(function(){
      if($(this).html() == defaultVal)
      {
        $(this).html("");
      }
    });
  });

div.textbox {
  border: 1px #000 solid;
  padding: .5em;
  width: 30em;
  height: 10em;
  overflow-y: scroll;
}
div.textbox span {
  line-height: 1.5em;
  max-width:30em;
  display: inline-block;
}
div.textbox span:focus {
  background: #ff0;
  border:0;
  outline: 0;
}
div.textbox span:active {
  border: 0;
  outline: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="textbox">
<span contenteditable="true">Type content here...</span>
</div>

edited Feb 11 '15 at 21:03

answered Feb 11 '15 at 20:39

Greg Rozmarynowycz

2,037
17
20

What exactly about this doesn't work for your situation? Does it need more padding on the highlighting? A visible box around the text? I'm not sure how what I posted doesn't answer your question – Greg Rozmarynowycz Feb 11 '15 at 20:47
Oh, well firstly it's a really odd textarea, it seems like every time I press enter a new textarea is created, secondly. Instead of highlighting the specific text only it seems to highlight the entire textarea box (perhaps this could be padding problem?). ALSO I'm not downgrading your answer at all, I really appreciate you helping! – KingAlfredChameleon Feb 11 '15 at 20:50
The tricky part of what you're asking is the text highlighting, the rest is all CSS styling, just matter of using css to get how you want it to look; I added a bit of the basics that's more what you were looking for – Greg Rozmarynowycz Feb 11 '15 at 20:55

Highlighting input in textarea

3 Answers3