24

私のサイトには、テキスト入力を 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.
4

9 に答える 9

54

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を置き換えます。

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

余談ですが、制限に達したときに入力を拒否して入力の長さを制限しようとするべきではないと思います。使い勝手的には面倒だし、とにかく頼りにならない。シンプルなカウントダウンとサーバー側のチェックが最良の選択肢です。

于 2009-08-09T06:09:43.993 に答える
7

場合によっては、複数のテキスト領域が必要であり、それぞれをコーディングせずに個別にアドレス指定する必要があります。このコードは、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>
于 2011-12-13T21:59:43.300 に答える
3

Aaron Russell の単純に数えられる jQuery プラグインを使用して成功しました

簡単な使い方:

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

高度な使い方:

$('#my_textarea').simplyCountable({
    counter: '#counter',
    countable: 'characters',
    maxCount: 140,
    strictMax: false,
    countDirection: 'down',
    safeClass: 'safe',
    overClass: 'over',
    thousandSeparator: ','
});
于 2010-01-26T00:11:58.430 に答える
2 
<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>
于 2009-08-09T10:17:18.970 に答える
1

だから私は @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);
    });
});

私と同じものを必要としている人のために:)

于 2012-03-06T15:46:24.563 に答える
1

私は jQuery と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();
        });
    };
于 2009-09-30T03:45:23.530 に答える
0

jQuery を使用して、100 文字に制限したいidフィールドを持つ textarea と、使用可能な文字数を表示するための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');
});
于 2009-08-09T06:09:33.310 に答える