Wie kann ich verhindern, weiteren input in textarea mit maxlength

Ich habe eine textarea, die ich will, um Eingaben zu sperren, wenn die eingegebenen Zeichen erreicht eine max-Länge.

Momentan habe ich ein Jquery-Skript für das Textfeld, berechnet die eingegebenen Zeichen und etwas hinzufügen möchten, blockiert die Eingabe in die textarea einmal 150 Zeichen eingegeben werden.

Ich habe versucht mit max-Länge-plugins in Verbindung mit meinem Skript, aber Sie scheinen nicht zu funktionieren. Hilfe ist willkommen.

AKTUELLEN CODE

(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);

InformationsquelleAutor user342391 | 2010-08-26

6

Haben Sie versucht, das maxlength-Attribut? , Eingabe sperren, sobald die Zeichen-Grenze erreicht ist.
```
<textarea maxlength='150'></textarea> //Won't work
<input type='text' maxlength='150' />
```
Bearbeiten Es scheint, dass maxlength für textarea funktioniert in Chrome, aber nicht in anderen Browsern, mein schlechtes. Naja, ein anderer Ansatz wäre einfach zu überwachen keydown-Ereignisse und, wenn die Länge>150, return false/preventDefault/aber Sie wollen halt die Standard-Aktion. Sie würden immer noch wollen, ermöglichen Sie die Rücktaste, und geben Sie jedoch so überwachen, keycode als gut.
```
$('#yourTextarea').keydown(function(e) {
    if (this.value.length > 150) 
        if ( !(e.which == '46' || e.which == '8' || e.which == '13') ) //backspace/enter/del
            e.preventDefault();
});
```
Funktioniert auf Eingänge aber nicht Texteingabefelder leider
maxlength ist keine gültige textarea-Attribut.
Ja, aus welchem Grund auch immer Chrome erzwingt es, was ich auch getestet. Naja, eine andere Methode aktualisiert.
Nicht genug Sonderzeichen überprüft wurden. Zum Beispiel wird es unmöglich sein, einfach zu bewegen Einfügemarke in den text-Bereich nach Länge-Grenze wird überschritten.
maxlength ist ein HTML5-Eigenschaft für ein Textfeld, und ist nicht unterstützt von Opera oder IE < 9 -- w3schools.com/tags/att_textarea_maxlength.asp

InformationsquelleAutor Robert
6

Bist du viel besser dran, nicht versuchen zu verhindern, dass der Benutzer von der Eingabe von zu vielen Zeichen und anstatt zu zeigen, einen Zähler und nur der Durchsetzung der Zeichen begrenzen, wenn der Benutzer versucht, sich zu Unterwerfen. Die Kommentar-Boxen, Stack Overflow, sind eine anständige Beispiel. Es ist sowohl technisch einfacher und wichtiger ist besser für den Benutzer, es zu tun auf diese Weise: es ist wirklich irritierend, nicht in der Lage sein, um Art/einfügen/drag-text in ein textarea-auch wenn Sie wissen, dass es eine Zeichenbegrenzung.

InformationsquelleAutor Tim Down
4

Textarea maxlength mit Jquery funktioniert OK, aber wahrscheinlich löst nicht das Problem des zusammenklebens in größeren Mengen von text.

PB Edit: wurde inzwischen aktualisiert hier

Bailey - Danke für den link zu den aktualisierten blog-post.

InformationsquelleAutor DaveB

Versuchen, diesen code unten ich hoffe, die Arbeit, denken Sie daran, jQuery-Bibliothek

<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();
            }
        });
    });    
});

InformationsquelleAutor Abdllah

0

Können Sie kürzen Sie den Inhalt der textarea, wenn Sie über 150 Charaktere, wie hier beschrieben http://web.enavu.com/daily-tip/maxlength-for-textarea-with-jquery/. Ich kann sehen, einige Probleme mit kopieren/einfügen wenn, bringt der text über dem limit aber.

InformationsquelleAutor PleaseStand

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.