0

我正在开发类似计数字符的推特，并且还将其字符限制为仅 160，当文本长度大于 160 时，我想将addClass()添加到倒数第 161 个字符，因此倒数第 161 个字符将文本装饰作为line-through . 基本上我可以使用substring()得到长度文本。但是如何将类添加到该子字符串文本是我的代码：

$(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：对不起我的英语:-)

4

1 回答 1

0

为了实现这一点，您需要使用<div contenteditable="true">而不是<textarea>，将内容拆分为 160 个字符，将多余的内容放入 a<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 在这里

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

于 2013-02-19T09:03:27.960 回答