突出显示文本区域中的输入

Question

我正在尝试在我的文本区域中实现突出显示效果，基本上是在用户键入句子时，添加了背景色，类似于此效果： http : //jsbin.com/josatozeyi/1/edit （我知道这是调整textarea的大小，但是还有其他方法吗？）

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

有什么建议么？

其他信息这就是我的意思： http : //prntscr.com/63xdi9

Answer 1

这对我来说太复杂了，但是我发现了这一点，可能会很有用：

highlightTextarea的目的是将部分文本突出显示为文本区域或输入。 它可以突出显示一组单词或特定范围。

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

资料来源： mistic100

Answer 2

添加一个css规则，将背景颜色添加到焦点上的文本区域。

input:focus { 
  background-color: yellow;
}

Answer 3

您可以使用contenteditable span元素来实现所需的效果，然后在焦点上应用背景色： 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>