it-swarm.com.de

textbereichszeichenbegrenzung

Ich möchte die Anzahl der Zeichen in einem Textfeld begrenzen können. Die Methode, die ich verwende, funktioniert in Google Chrome hervorragend, ist aber in Firefox langsam und im IE nicht.

Javascript:

function len(){
  t_v=textarea.value;
  if(t_v.length>180){
    long_post_container.innerHTML=long_post;
    post_button.className=post_button.className.replace('post_it_regular','post_it_disabled');
    post_button.disabled=true;
  }
  else{
    long_post_container.innerHTML="";
    post_button.className=post_button.className.replace('post_it_disabled','post_it_regular');
    post_button.disabled=false;
  }
  if(t_v.length>186){
        t_v=t_v.substring(0,186);
    }
}

HTML:

<textarea id="user_post_textarea" name="user_post_textarea" cols="28" rows="1"  onkeypress="len();" onkeyup="len();"></textarea>

Javascript am unteren Teil des Körperelements:

textarea=document.getElementById('user_post_textarea');
26
Web_Designer

Ich habe eine gute Lösung gefunden, die das Attribut maxlength verwendet, wenn der Browser dies unterstützt, und in nicht unterstützenden Browsern auf ein unauffälliges Javascript zurückgreift.

Dank @Dan Tellos Kommentar habe ich es behoben, damit es auch in IE7 + funktioniert:

HTML:

<textarea maxlength="50" id="text">This textarea has a character limit of 50.</textarea>

Javascript:

function maxLength(el) {    
    if (!('maxLength' in el)) {
        var max = el.attributes.maxLength.value;
        el.onkeypress = function () {
            if (this.value.length >= max) return false;
        };
    }
}

maxLength(document.getElementById("text"));

DEMO

In HTML5 gibt es so etwas nicht als minlength-Attribut.
Für die folgenden Eingabetypen: number, range, date, datetime, datetime-local, month, time und week (welche noch nicht vollständig unterstützt werden ) verwenden die Attribute min und max.

68
Web_Designer

Dies ist völlig ungetestet, sollte aber das tun, was Sie brauchen.

Update: hier ist ein Jsfiddle zum Anschauen. Scheint zu funktionieren. Verknüpfung

Sie würden es in eine js-Datei einfügen und nach Ihrer Jquery-Referenz referenzieren. Sie würden es dann so nennen.

$("textarea").characterCounter(200);

Eine kurze Erklärung, was los ist ..

Bei jedem Keyup-Ereignis prüft die Funktion, welche Art von Taste gedrückt wird. Wenn dies akzeptabel ist, überprüft der Zähler den Zählerstand, trimmt den Überschuss ab und verhindert weitere Eingaben, sobald das Limit erreicht ist.

Das Plugin sollte auch das Einfügen in das Ziel übernehmen.

  ; (function ($) {
        $.fn.characterCounter = function (limit) {
            return this.filter("textarea, input:text").each(function () {
                var $this = $(this),
                  checkCharacters = function (event) {

                      if ($this.val().length > limit) {

                          // Trim the string as paste would allow you to make it 
                          // more than the limit.
                          $this.val($this.val().substring(0, limit))
                          // Cancel the original event
                          event.preventDefault();
                          event.stopPropagation();

                      }
                  };

                $this.keyup(function (event) {

                    // Keys "enumeration"
                    var keys = {
                        BACKSPACE: 8,
                        TAB: 9,
                        LEFT: 37,
                        UP: 38,
                        RIGHT: 39,
                        DOWN: 40
                    };

                    // which normalizes keycode and charcode.
                    switch (event.which) {

                        case keys.UP:
                        case keys.DOWN:
                        case keys.LEFT:
                        case keys.RIGHT:
                        case keys.TAB:
                            break;
                        default:
                            checkCharacters(event);
                            break;
                    }   

                });

                // Handle cut/paste.
                $this.bind("paste cut", function (event) {
                    // Delay so that paste value is captured.
                    setTimeout(function () { checkCharacters(event); event = null; }, 150);
                });
            });
        };
    } (jQuery));
8
James South

verwenden Sie das Maxlength-Attribut von Textarea, um den Trick auszuführen. 

1
Rohit Gupta

Ich denke, dass dies einfacher sein könnte, als die meisten Leute denken!

Versuche dies:

var yourTextArea = document.getElementById("usertext").value;
// In case you want to limit the number of characters in no less than, say, 10
// or no more than 400.        
    if (yourTextArea.length < 10 || yourTextArea.length > 400) {
        alert("The field must have no less than 10 and no more than 400 characters.");
        return false;
    }

Bitte lassen Sie mich wissen, dass dies nützlich war. Und wenn ja, stimmen Sie ab! Vielen Dank!

Daniel

1

Dies funktioniert beim Einfügen und Einfügen. Der Text wird rot eingefärbt, wenn Sie fast den Grenzwert erreicht haben, wird abgeschnitten, wenn Sie darüber gehen, und weist Sie darauf hin, dass Sie Ihren Text bearbeiten können.

var t2 =/* textarea reference * /

t2.onkeyup= t2.onpaste= function(e){
    e= e || window.event;
    var who= e.target || e.srcElement;
    if(who){
        var val= who.value, L= val.length;
        if(L> 175){
            who.style.color= 'red';
        }
        else who.style.color= ''
        if(L> 180){
            who.value= who.value.substring(0, 175);
            alert('Your message is too long, please shorten it to 180 characters or less');
            who.style.color= '';
        }
    }
}
1
kennebec

Ich glaube, wenn Sie Delegierte verwenden, würde es funktionieren.

$("textarea").on('change paste keyup', function () {
    var currText = $(this).val();
    if (currText.length > 500) {
        var text = $(this).text();
        $(this).text(text.substr(0, 500));
        alert("You have reached the maximum length for this field");
    }
});
0
El Colo

Verwenden Sie jQuery, um Probleme mit der Browserkompatibilität zu vermeiden ...

$("textarea").keyup(function(){
    if($(this).text().length > 500){
        var text = $(this).text();
        $(this).text(text.substr(0, 500));   
    }
});
0

Schnelle und schmutzige universelle jQuery-Version. Unterstützt das Kopieren/Einfügen.

$('textarea[maxlength]').on('keypress mouseup', function(){
    return !($(this).val().length >= $(this).attr('maxlength'));
});
0
Nick B