突出显示textarea中的输入

问题描述：

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

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

有什么建议吗？

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

是否确定要加s''到''？ – <a rel="noopener">Stickers</a> 2015-02-11 20:46:53

只要它达到预期的结果，并不会弄乱textarea的功能，那么是的:) – KingAlfredChameleon 2015-02-11 20:48:28

我想，如果你以真实的形式使用这个textarea并且可以提交，那就不行了。 – Stickers 2015-02-11 20:50:28

答

添加CSS规则，增加了一个背景色为焦点textarea的。

input:focus { 
    background-color: yellow; 
}

嗨，这个只是使整个textarea背景变成黄色，而不仅仅是文本的特定背景。 – KingAlfredChameleon 2015-02-11 20:33:20

答

你可以达到你想要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>

嘿，http://prntscr.com/63xdi9，我想我不清楚，对不起。 – KingAlfredChameleon 2015-02-11 20:44:10

这究竟是什么不适合你的情况？突出显示是否需要更多填充？文字周围的可见框？我不知道我发布的内容如何不能回答你的问题 – 2015-02-11 20:47:10

呵呵，首先它是一个非常奇怪的textarea，看起来每次我按下时都会创建一个新的textarea，其次。而不是突出显示特定的文本，它似乎突出显示整个textarea框（也许这可能是填充问题？）。此外，我不会降级你的答案，我非常感谢你的帮助！ – KingAlfredChameleon 2015-02-11 20:50:47

答

它太复杂，我，但我发现它，它可能是有用的：

highlightTextarea的目标是将文本的某些部分高亮显示为textarea 或输入。它可以突出显示一组单词或特定范围。

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

来源：mistic100

突出显示textarea中的输入

相关推荐