web-dev-qa-db-ja.com

jqueryまたはその他のテキストエリアで利用可能なスペースをカウントダウンしますか？

私のサイトには、テキスト入力をX文字に制限する必要のある領域がいくつかあります。Twitterのように、ユーザーが入力している間に残っているスペースの数を表示すると便利です。

このjqueryプラグインを見つけました。 jquery max-lengthプラグイン

それは私が必要なことをするだけですが、それはちょっとやり過ぎのようです、ファイルサイズはわかりませんが、そのような単純なタスクのためのコードの多くの行のように見えます、あなたは私が非jqueryメソッドを使用する方が良いと思いますか？ jqueryが進むべき道だと思ったのは、jqueryがすでにすべてのページに含まれているためですUPDATE;

まったく同じことを行うこの非jqueryメソッドは、フットプリントがはるかに小さいので、これがより良いメソッドであることがわかりました。

<script language="javascript" type="text/javascript">
function limitText(limitField, limitCount, limitNum) {
   if (limitField.value.length > limitNum) {
    limitField.value = limitField.value.substring(0, limitNum);
   } else {
    limitCount.value = limitNum - limitField.value.length;
   }
}
</script>

You have 
<input readonly type="text" name="countdown" size="3" value="1000">
characters left.
jquerytextmax
24
JasonDavis

JQueryでは非常に単純です：

<textarea id="myTextarea"></textarea>
<p id="counter"></p>

<script type="text/javascript">
$('#myTextarea').keyup(function () {
    var left = 200 - $(this).val().length;
    if (left < 0) {
        left = 0;
    }
    $('#counter').text('Characters left: ' + left);
});
</script>

あなたの限界が何であれ、200を置き換えてください。

これは実際のテキスト入力を制限するものではなく、カウントダウンするだけであることに注意してください。サーバー側で入力の長さを確認する必要があります。これは単なる視覚的なヘルパーです。

余談ですが、制限に達したときに入力を拒否して入力の長さを制限しようとするべきではないと思います。それは後部の使いやすさの面での痛みであり、とにかく頼ることはできません。単純なカウントダウンとサーバー側のチェックは、私見の最良のオプションです。

52
deceze

複数のテキスト領域が必要で、それぞれをコーディングせずに個別にアドレス指定したい場合があります。このコードは、maxLength属性を持つすべての文字に残りの文字を動的に追加します。

<script type="text/javascript">
$(document).ready(function(){
    $('textarea[maxLength]').each(function(){
        var tId=$(this).attr("id");
        $(this).after('<br><span id="cnt'+tId+'"></span>');
        $(this).keyup(function () {
            var tId=$(this).attr("id");
            var tMax=$(this).attr("maxLength");//case-sensitive, unlike HTML input maxlength
            var left = tMax - $(this).val().length;
            if (left < 0) left = 0;
            $('#cnt'+tId).text('Characters left: ' + left);
        }).keyup();
    });
});
</script>
<textarea id="myTextarea" maxLength="200">Initial text lorem ipsum blah blah blah</textarea><br><br>
<textarea id="mySecondTextarea" maxLength="500"></textarea><br><br>
<textarea id="textareaWithoutCounter"></textarea>
7
gordon

私はAaronRussellの単に可算jQueryプラグインを使用して成功しました

簡単な使用法：

$('#my_textarea').simplyCountable();

高度な使用法：

$('#my_textarea').simplyCountable({
    counter: '#counter',
    countable: 'characters',
    maxCount: 140,
    strictMax: false,
    countDirection: 'down',
    safeClass: 'safe',
    overClass: 'over',
    thousandSeparator: ','
});
3
Ryan McGeary
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function()
        {
            $('#TestId').keyup(function(e)
            {
                var maxLength = 100;
                var textlength = this.value.length;
                if (textlength >= maxLength)
                {
                    $('#charStatus').html('You cannot write more then ' + maxLength + ' characters!');
                    this.value = this.value.substring(0, maxLength);
                    e.preventDefault();
                }
                else
                {
                    $('#charStatus').html('You have ' + (maxLength - textlength) + ' characters left.');
                }
            });
        });
    </script>
</head>
<body>
    <textarea id="TestId" cols="20" rows="8"></textarea><br />
    (Maximum characters: 100)<br />
    <span id="charStatus"></span>   
</body>
</html>
2
Raghav
 var max = 140;
        $("#spn").html(max+"  Remaining");
        $("#textarea").keyup(function () {
            var lenght1 = $("#textarea").val().length;
            var remaining = max - lenght1;
            $("#spn").html(remaining + "  Remaining");
            if (remaining < 0) { $("#spn").css('opacity', '0.4').css('color', 'red'); $("#comment").attr('disabled', 'disabled'); } else { $("#spn").css('opacity', '1').css('color', 'black'); $("#comment").removeAttr('disabled'); }
            if (remaining < 10) { $("#spn").css('color', 'red'); } else { $("#spn").css('color', 'black'); }

        });
2
Mujahid Ali

だから私は@decezeバージョンを取り、それを作るために少しトリックを追加しました：

  • ユーザーが入力を開始したときだけでなく、常に表示する
  • 制限を超えたときにマイナスを表示し、

  • クラスを追加します-テキストに色を付けます-制限を超えた場合（もちろんこれには追加のcssが必要です）

    $(document).ready(function(){
    var left = 200
    $('#field_counter').text('Characters left: ' + left);

        $('#id_description').keyup(function () {

        left = 200 - $(this).val().length;

        if(left < 0){
            $('#field_counter').addClass("overlimit");
        }
        if(left >= 0){
            $('#field_counter span').removeClass("overlimit");
        }

        $('#field_counter').text('Characters left: ' + left);
    });
});

私と同じものが必要な人のために:)

1
Christoffer

私はjQueryと answer をdecezeで使用し、それを微調整してTwitterスタイルのカウントダウンを提供し、ユーザーがどれだけ超えたかを確認し、それに応じてテキストを調整できるようにしました。また、それを独自の関数に入れて、テキスト領域に自動的に入力されることがある別の関数から呼び出すことができるようにしました。

    function reCalcToText() {
        var left = 200 - $('.toText').val().length;
        if (left < 0) {
            $('#counter').text(left);
            $('#counter').addClass("excess");
        } else {
            $('#counter').text(left);
            $('#counter').removeClass();
        }
    }
    function onReady() {
                  $('#<%= toText.ClientID %>').keyup(function() {
            reCalcToText();
        });
    };
1
Falkayn

NewLinesが2文字であることを考慮する必要があることに注意してください。
新しい行を説明する以下のコードに対して、ここで提供されるソリューションに基づいて構築しました。

function DisplayCharactersLeft(idOfInputControl) {
    var maxNumberOfCharacters = $("#" + idOfInputControl).attr("maxLength");

    $("#" + idOfInputControl).on("input", function () {
        var currentText = $(this).val();
        var numberOfNewLines = GetNumberOfNewLines(currentText);

        var left = maxNumberOfCharacters - (currentText.length + numberOfNewLines);
        if (left < 0) { left = 0; }
        $("#" + idOfInputControl + "CharactersLeftCounter").text("Characters left: " + left);
    });

}    

function GetNumberOfNewLines(text) {

    var newLines = text.match(/(\r\n|\n|\r)/g);
    var numberOfNewLines = 0;
    if (newLines != null) {
        numberOfNewLines = newLines.length;
    }
    return numberOfNewLines;
}
0
trainer

JQueryを使用して、100文字に制限したいID fieldのテキストエリアと、使用可能な文字数を表示するID chars-remainingの別の要素があると仮定します。 ：

var max = 100;
$('#field').keyup(function() {
    if($(this).val().length > max) {
        $(this).val($(this).val().substr(0, max));
    }
    $('#chars-remaining').html((max - $(this).val().length) + ' characters remaining');
});
0
bryan