Question

我正在开发类似计数字符的twitter，并且还将其chacarter限制为仅160，当文本长度大于160时，我想 addClass（）到第161个最后一个字符，所以161st-最后一个字符 text-decoration 为 line-through 。基本上我可以使用 substring（）获取长度文本。但是如何 addClass 到该子文本这是我的代码：

$(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>

这是我的jsfiddle http://jsfiddle.net/ZM9WD/4/

ps：对不起我的英语： - ）

Answer 1

为了实现这一目标，您需要使用<div contenteditable="true">代替<textarea>，将内容拆分为160个字符，将多余内容分配到<em>并使用css设置样式。

标记

<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);
});

setEndOfContenteditable()的源代码取自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

示例粗略工作，但我相信这里还有很大的改进空间。

子串文本上的jquery addClass

1 个答案: