6

入力した文字が最大長に達した場合に入力をブロックしたいテキストエリアがあります。

現在、入力された文字を計算するテキストボックス用の Jquery スクリプトがあり、150 文字が入力されるとテキストエリアへの入力をブロックする何かを追加したいと考えています。

スクリプトと組み合わせて max-length プラグインを使用しようとしましたが、機能していないようです。助けていただければ幸いです。

現在のコード

(function($) {
    $.fn.charCount = function(options){
        // default configuration properties
        var defaults = {    
            allowed: 150,       
            warning: 25,
            css: 'counter',
            counterElement: 'span',
            cssWarning: 'warning',
            cssExceeded: 'exceeded',
            counterText: '',
            container: undefined // New option, accepts a selector string
        }; 

        var options = $.extend(defaults, options); 

        function calculate(obj,$cont) {
              // $cont is the container, now passed in instead.
            var count = $(obj).val().length;
            var available = options.allowed - count;
            if(available <= options.warning && available >= 0){
                $cont.addClass(options.cssWarning);
            } else {
                $cont.removeClass(options.cssWarning);
            }
            if(available < 0){
                $cont.addClass(options.cssExceeded);
            } else {
                $cont.removeClass(options.cssExceeded);
            }
            $cont.html(options.counterText + available);
        };

        this.each(function() {
         // $container is the passed selector, or create the default container
            var $container = (options.container)
                    ? $(options.container)
                        .text(options.counterText)
                        .addClass(options.css)
                    : $('<'+ options.counterElement +' class="' + options.css + '">'+ options.counterText +'</'+ options.counterElement +'>').insertAfter(this);
            calculate(this,$container);
            $(this).keyup(function(){calculate(this,$container)});
            $(this).change(function(){calculate(this,$container)});
        });

    };
})(jQuery);
4

5 に答える 5

8

maxlength 属性を試しましたか? 文字数制限に達すると、入力がブロックされます。

<textarea maxlength='150'></textarea>​​​​​​​​​​​​​​​​​​​​​​​​​​ // Won't work
<input type='text' maxlength='150' />

編集テキストエリアの最大長は Chrome では機能するようですが、他のブラウザーでは機能しないようです。もう 1 つの方法は、キーダウン イベントを監視し、長さが 150 を超える場合は false/preventDefault を返し、デフォルト アクションを停止することです。ただし、バックスペースとエンターを許可したい場合は、キーコードも監視してください。

$('#yourTextarea').keydown(function(e) {
    if (this.value.length > 150) 
        if ( !(e.which == '46' || e.which == '8' || e.which == '13') ) // backspace/enter/del
            e.preventDefault();
});
于 2010-08-26T19:25:33.937 に答える
6

ユーザーがあまりにも多くの文字を入力するのを防ごうとせず、代わりにカウンターを表示し、ユーザーが送信しようとしたときにのみ文字制限を適用する方がはるかに良いでしょう。コメントボックスのStackOverflowは適切な例です。技術的にも重要なこととして、ユーザーがこの方法で行う方が簡単です。文字数制限があることがわかっていても、テキストをテキスト領域に入力/貼り付け/ドラッグできないのは非常に苛立たしいことです。

于 2010-08-26T23:38:51.487 に答える
4

Jquery を使用した Textarea maxlength は正常に機能しますが、大量のテキストを貼り付けるという問題はおそらく解決しません。

PB 編集:ここで更新されました

于 2010-08-26T19:34:35.193 に答える
1

以下のコードを試してみてください。うまくいくことを願っています.jQueryライブラリを含めることを忘れないでください.

<div class="texCount"></div>
<textarea class="comment"></textarea>

$(document).ready(function(){
    var text_Max = 200;      
    $('.texCount').html(text_Max+'Words');

    $('.comment').keyup(function(){        
        var text_Length = $('.comment').val().length;        
        var text_Remain = text_Max - text_Length;       
        $('.texCount').html(text_Remain + 'Words');

        $('.comment').keydown(function(e){         
            if(text_Remain == 0){
                e.preventDefault();
            }
        });
    });    
});
于 2013-09-17T22:05:51.990 に答える
0

http://web.enavu.com/daily-tip/maxlength-for-textarea-with-jquery/で説明されているように、テキストエリアが 150 文字を超える場合は、テキストエリアの内容を切り詰めることができます。ただし、テキストが制限を超えると、コピー/貼り付けに問題が発生する可能性があります。

于 2010-08-26T19:31:19.680 に答える