0

I need CSS or jQuery hack to highlight first 160 characters inside of textarea which you can edit

In backend there is a textarea where you enter description of person, in frontend you can only see first 160 characters of that description and you can click to expand it, how can i do this?

ViRPo
  • 126
  • 2
  • 11
  • There needs to be more context here. Difficult to understand what you are looking for. – Dhunt Nov 16 '15 at 16:22
  • Lets say you write 300 letters and you are not sure where it will get split. You still want to be able to add long descriptions, but you also wanna know what the excrept of the description will look like I dont want to limit the input length – ViRPo Nov 16 '15 at 16:23

2 Answers2

0

If I understand your question correctly, the example below will deliver what you are trying to achieve:

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>
Rounin
  • 27,134
  • 9
  • 83
  • 108
  • I feel like I should have invested more time into writing that question correctly, sorry, my bad! What I wanted to achieve is that in the "Complete Text" textarea, first 160 letters would be coloured in lets say red, or have orange background (thats what i mean by highlighting it) So you are editing some text in textarea and yuo know, when you passed the 160 characters mark, so you know what will show on frontend (frontpage) and what will only be seen when you click to expand it by clicking link to whole article (for example) Can you help me wit that? – ViRPo Nov 16 '15 at 17:02
  • No problem. I've updated the script above, so that every time you edit the `
    – Rounin Nov 16 '15 at 17:21
  • I've made a few more changes - I think I have it completely cracked. – Rounin Nov 16 '15 at 17:50
  • 1
    Thank you very much! Now I understand you cannot directly manipulate what is inside textarea, but I can use this to achieve same result - so the editor knows, what will be shown on frontpage I will repeat myself, thank you :) – ViRPo Nov 16 '15 at 22:10
    • 0

    There is not a way to style partial text in a text area. To achieve this, you'll need to use an extra div and hide the text area or use a div with editable content as described on this question: Highlight text inside textarea like Facebook does

    Community
    • 1
    • 1
    Brady Cartmell
    • 607
    • 3
    • 8
    • Thank you very much, this information was usefull, i didnt realize you cannot directly manipulate textareas with CSS! – ViRPo Nov 16 '15 at 22:08