jquery addClass on substring text

Question

i am developing twitter like count characters and also limit its chacarter to only 160, when the text length is greater than 160 i want to addClass() to the 161st-last character so the 161st-last character have text-decoration as line-through. Basicly i can get out length text using substring(). But how to addClass to that substringed text here's my 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 this in 161st-last character not on all 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 my jsfiddle http://jsfiddle.net/ZM9WD/4/

ps:sorry for my english :-)

Add CSS property to your textarea , http://jsfiddle.net/Pervez/ZM9WD/2/, this is what u looking for ? — EnterJQ, Feb 19 '13 at 07:53
no, i want the 161st-last characters have text-decoration as line-through. i;m thinking to use addClass(), maybe direct css() can also be used, but i don't know hot to apply both since the 161st-last characters don't have id or class to be binded — Agung Setiawan, Feb 19 '13 at 08:01
@AgungSetiawan i don't think you can achieve it using normal text area... may be you can try any open source trimmed down version of rich text plugin's and apply css programatically — , Feb 19 '13 at 08:06
I think it is impossible to style a part of `TextArea`, you may be `addClass` to all the text when over the limit — Steely Wing, Feb 19 '13 at 08:07
@WingLeong yeah that's what i did, add css to all the text when over the limit, so if my case can't be solved, how twitter did it? just curious — Agung Setiawan, Feb 19 '13 at 08:09
@AgungSetiawan twitter doesn't use text area for new tweets.. youc an check on their web site by inspecting the element using firebug.. — , Feb 19 '13 at 08:15

score 0 · Accepted Answer · edited May 23 '17 at 12:27

In order to achieve this you need to utilize <div contenteditable="true"> instead of <textarea>, split the content at 160 character, put excess in a <em> and style it with css.

Markup

<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

$("#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 for setEndOfContenteditable() is taken from here https://stackoverflow.com/a/3866442/1920232

CSS

#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 is here

Example roughly working, but I believe there is a plenty of room for improvement here.

jquery addClass on substring text

1 Answers1