Question

我正在尝试在我的textarea中实现高亮效果，基本上当用户键入一个句子时，正在添加背景颜色，类似于此效果：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规则，为焦点上的textarea添加背景颜色。

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>

在textarea中突出显示输入

3 个答案: