jquery - 突出显示文本区域中的特定数量的字符

Question

我需要 CSS 或 jQuery hack 来突出显示您可以编辑的文本区域内的前 160 个字符

在后端有一个文本区域，您可以在其中输入人员的描述，在前端您只能看到该描述的前 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>