2010-05-10 17 views
5

mein Versuch, hier auf die Anzahl der Zeichen in einem Textbereich eingegeben Begrenzung:Wie die Anzahl der Zeichen in einem Textbereich eingegeben begrenzen

var limit = 255; 
var txt = $('textarea[id$=txtPurpose]'); 

$(txt).keyup(function() { 
    var len = $(this).val().length; 
    if (len > limit) { 
     //this.value = this.value.substring(0, 50); 
     $(this).addClass('goRed'); 
     $('#spn').text(len - limit + " characters exceeded"); 
     return false; 
    } else { 
     $(this).removeClass('goRed'); 
     $('#spn').text(limit - len + " characters left"); 
    } 
}); 

Es ist jedoch sehr gut funktioniert nicht. Wie kann ich verhindern, dass ein Benutzer nach Erreichen einer bestimmten Grenze Text eingibt, sagen wir 255 Zeichen?

Antwort

9

Hier ist, was ich verwende, um etwas auf 1200 Zeichen zu begrenzen. Wenn jemand zu viele Zeichen eingibt, trenne ich einfach den Inhalt dieses Textfelds.

$(function() { 
    //set up text length counter 
    $('#id_limited_textarea').keyup(function() { 
     update_chars_left(1200, $('#id_limited_textarea')[0], $('#text_chars_left')); 
    }); 
    //and fire it on doc ready, too 
    update_chars_left(1200, $('#id_limited_textarea')[0], $('#text_chars_left')); 

}); 

function update_chars_left(max_len, target_input, display_element) { 
    var text_len = target_input.value.length; 
    if (text_len >= max_len) { 
     target_input.value = target_input.value.substring(0, max_len); // truncate 
     display_element.html("0"); 
    } else { 
     display_element.html(max_len - text_len); 
    } 
} 
+0

Sie haben den Aufruf update_chars_left() kopiert und eingefügt, obwohl die Parameter identisch sind. – mikemaccana

+0

Dies kann noch mehr vereinfacht werden, siehe meine Antwort unten. –

5
$(this).val($(this).val().substring(0, limit)); 
+0

wird die Zeichen nicht abgeschnitten. –

+0

@Abu: Whoops, versuchen Sie dies –

+1

Ist dieser Code am besten innerhalb des Keyup-Ereignisses platziert? –

1

Mein Plugin:

(function($) { 

    $.fn.textCounter = function(options) { 

     var defaults = { 
      maxlimit: 100,  // max limit character 
      description: null, // element for descript count character 
      enter: true   // if accept enter 
     }; 

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

     if (options.description != null) { 
      if (typeof options.description == 'string') 
       options.description = $('#' + options.description); 
     } 

     var fevent = function(ev) { 

      var value = $(this).val(), 
       k = ev.charCode || ev.keyCode || ev.which, 
       incremente = 1; 

      if (k == 8) 
       incremente = -1; 

      if (options.enter == false && k == 13) 
       return false; 

      if (ev.ctrlKey || ev.altKey || ev.metaKey) //Ignore 
       return true; 

      if ((value.length + incremente) > options.maxlimit) 
       return false; 

      return true; 
     }; 

     var fcounter = function(ev) { 
      var value = $(this).val(); 
      $(options.description).text(options.maxlimit - value.length); 
     }; 

     $(this).each(function(i, el) { 
      if ($(this).is(':input')) { 
       $(this).unbind('keypress.textCounter').bind('keypress.textCounter', fevent); 
       $(this).unbind('keyup.textCounter').bind('keyup.textCounter', fcounter); 
      } 
     }); 

    }; 

})(jQuery); 
0
var limit="NO of characters";<br><br> 
$(this).val($(this).val().substring(0, limit)); 
9

Obwohl diese Frage ziemlich alt ist. Wenn ich du war, mache ich etwas sehr einfaches wie

Dies würde die Benutzer beschränken, nur 255 Zeichen in der Textarea einzugeben.

+1

danke Kumpel ... ich vergaß das :) - eine 0,0001kb Lösung (+1) –

+0

Was ist die Unterstützung für 'maxlength'? –

3

Um dies auf den blanken Knochen Grund zu vereinfachen:

<textarea name="message" onkeydown="return this.value.substr(0,160)"></textarea> 

Stellen Sie Ihre max, wo 160 ist.

Verwandte Themen