0

私は twitter のようなカウント文字を開発しており、テキストの長さが 160 を超える場合は、その文字を 160 のみに制限しています. 基本的に、 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:私の英語でごめんなさい:-)

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 に答える