jquery addClass on substring text -

jquery addClass on substring text -

i developing twitter count characters , limit chacarter 160, when text length greater 160 want addclass() 161st-last character 161st-last character have text-decoration line-through. basicly can out length text using substring(). how addclass substringed text here's code:

$(document).ready(function(){ $("#tweet").attr("disabled","disabled"); $("#area").keyup(function(){ var chars=$(this).val().length; $("#message").text(160-chars); if(chars > 160 || chars <=0){ $("#tweet").attr("disabled","disabled"); $("#message").addclass("minus"); $(this).css("text-decoration","line-through"); //i want in 161st-last character not on text }else{ $("#tweet").removeattr("disabled"); $("#message").removeclass("minus"); $(this).css("text-decoration",""); } }); });

html

<div id="box"> <p>(maximum allowed characters : 160)</p> <p><textarea id="area" rows="10" cols="40"></textarea></p> <span id="message"> 160 </span> characters remaining <input type="button" id="tweet" value="tweet"/> </div>

and here's jsfiddle http://jsfiddle.net/zm9wd/4/

ps:sorry english language :-)

in order accomplish need utilize <div contenteditable="true"> instead of <textarea>, split content @ 160 character, set excess in <em> , style css.

markup

class="lang-html prettyprint-override"><div id="box"> <p>(maximum allowed characters : 160)</p> <p><div id="area" contenteditable="true"></div></p> <span id="message"> 160 </span> characters remaining <input type="button" id="tweet" value="tweet"/> </div>

js

class="lang-js prettyprint-override">$("#area").keyup(function(){ var content = $(this).text(); var chars=content.length; $("#message").text(160-chars); var html=""; if (chars > 160 || chars <=0){ html = content.substr(0, 160) + "<em>" + content.substr(160) + "</em>" } else { html = content.substr(0, 160); } $(this).html(html); setendofcontenteditable(this); });

source code setendofcontenteditable() taken here http://stackoverflow.com/a/3866442/1920232

css

class="lang-css prettyprint-override">#area { -moz-appearance: textfield-multiline; -webkit-appearance: textarea; border: 1px solid gray; font: medium -moz-fixed; font: -webkit-small-control; height: 68px; overflow: auto; padding: 2px; resize: both; width: 350px; } #area em { color: red; text-decoration: line-through; }

jsfiddle here

example working, believe there plenty of room improvement here.

jquery