2

現時点では、Twitter のテキストエリアで本質的に同じタイプのカウントダウンを作成しようとしています。最初のテキストエリアでは機能しますが、最初のテキストエリアで入力を開始すると、すべての投稿に残っている同じ量の文字が複製されます。

私が知る必要があるのは、現在のテキストエリアだけに残っている文字を取得するにはどうすればよいですか?

HTML:

<textarea name="comment" class="inputField newComment">@'.$post['username']." ".'</textarea>
<span class="countdown"></span>

jQuery:

function updateCountdown() {

    var remaining = 140 - $('.newComment').val().length;
    $('.countdown').text(remaining + ' characters remaining');

    if(remaining < 0){

        $(this).siblings('.postComment').hide(500);

    }else{

        $(this).siblings('.postComment').show(500);
        if(remaining <= 10){
            $(this).siblings('.countdown').css("color","red");
        }else{
            $(this).siblings('.countdown').css("color","black");
        }
    }
}

$('.newComment').change(updateCountdown);
$('.newComment').keyup(updateCountdown);
4

2 に答える 2

2

このようなことを試してみてください。

HTML

    <textarea name="comment" class="inputField newComment" data-limit=20></textarea>
<span class="countdown"></span>
<textarea name="comment" class="inputField newComment" data-limit=20></textarea>
<span class="countdown"></span>

JS

    $(document).ready(function () {
    $('textarea').on("propertychange keyup input paste",

    function () {
        var limit = $(this).data("limit");
        var remainingChars = limit - $(this).val().length;
        if (remainingChars <= 0) {
            $(this).val($(this).val().substring(0, limit));
        }
        $(this).next('span').text(remainingChars<=0?0:remainingChars);
    });
});

http://jsfiddle.net/qMbdW/3/

于 2013-10-11T19:13:08.647 に答える
0

私のバージョンは少し長文ですが、機能し、テキストエリアに data-limit 属性 (またはその他の属性) を必要としません。私の場合、独自のフォーム ビルダーを備え、ページの HTML へのアクセスが制限されている古いバージョンの jQuery と CMS と格闘していました。

HTMLは次のとおりです。

<div id="counter">myTextArea</div>
<textarea id="myTextarea" rows="2" cols="30">   </textarea>

<div id="counter2">myTextArea2</div>
<textarea id="myTextarea2" rows="2" cols="30"></textarea>

そして、ここにjQueryがあります：

$(document).ready(function() {
    // set the IDs for the text areas and counters
    // handy for aliasing long, CMS-generated IDs
    var myTextarea = 'myTextarea';
    var counter = 'counter';
    var myTextarea2 = 'myTextarea2';
    var counter2 = 'counter2';

    $('#' + myTextarea).keyup(function () {
        var charLimit = 150; 
        var remainingChars = charLimit - $(this).val().length;
        if (remainingChars < 0) {
            // trim input, if necessary
            var tlength = $(this).val().length;
            $(this).val($(this).val().substring(0, charLimit));
            var tlength = $(this).val().length;
            remain = parseInt(tlength);
            $('#myTextarea').text(remain);
        }
        $('#' + counter).text('(' + remainingChars + ' characters left)');
    });
    $('#' + myTextarea2).keyup(function () {
        var charLimit = 150; 
        var remainingChars = charLimit - $(this).val().length;
        if (remainingChars < 0) {
            // trim input, if necessary
            var tlength = $(this).val().length;
            $(this).val($(this).val().substring(0, charLimit));
            var tlength = $(this).val().length;
            remain = parseInt(tlength);
            $('#myTextarea2').text(remain);
        }
        $('#' + counter2).text('(' + remainingChars + ' characters left)');
    });
});

JSFiddle は次のとおりです。

https://jsfiddle.net/jamesnotjim/k9fzoytp/

于 2016-07-06T21:25:04.103 に答える