Question

我需要CSS或jQuery hack来突出显示textarea中可以编辑的前160个字符

在后端有一个textarea，你输入人物的描述，在前端你只能看到该描述的前160个字符，你可以点击展开它，我该怎么做？

Answer 1

如果我正确理解您的问题，下面的示例将提供您要实现的目标：

function getExcerpt() {
var textArea = document.getElementsByTagName('textarea')[0];
var excerpt = document.getElementsByClassName('excerpt')[0];
var remainder = document.getElementsByClassName('remainder')[0];

var text = textArea.value;
var text160 = text.substr(0,160);
var textRemainder = text.substr(160);

excerpt.innerHTML = text160;
remainder.innerHTML = textRemainder;
}

function updateExcerpt() {
document.getElementsByTagName('textarea')[0].addEventListener('keyup',getExcerpt,false);}

window.onload = getExcerpt(); updateExcerpt();

.panel {
float: left;
width: 400px;
margin-right: 40px;
}

textarea, .text {
width: 400px;
height: 200px;
}

.excerpt {
color: rgba(191,0,0,1);
background-color: rgba(255,255,191,1);
}

<div class="panel">
<h2>160 Character Excerpt</h2>
<div class="text">
<span class="excerpt"></span><span class="remainder"></span>
</div>
</div>

<div class="panel">
<h2>Complete Text</h2>
<textarea>
He told them tales of bees and flowers, the ways of trees, and the strange creatures of the Forest, about the evil things and the good things, things friendly and things unfriendly, cruel things and kind things, and secrets hidden under brambles.
</textarea>
</div>

Answer 2

没有办法在文本区域中设置部分文本的样式。要实现此目的，您需要使用额外的div并隐藏文本区域或使用具有可编辑内容的div，如此问题所述： Highlight text inside textarea like Facebook does

突出显示textarea中的特定字符数

2 个答案: