it-swarm.com.de

Max Zeichen in Textfeldern mit Jquery

Ich habe den folgenden Code, und ich bin irgendwie fest, was als nächstes zu tun ist. Die Idee ist, wenn Sie Text in einen Textbereich eingeben, zeigt ein Zähler an, wie viele Zeichen Sie noch haben. Sobald Sie die maximalen Zeichen erreicht haben, möchte ich die Eingabe von Zeichen beenden oder alle Zeichen löschen, die eingegeben wurden, sodass der Textbereich nur aus 10 Zeichen besteht. Ich weiß, ich muss den Code dort einfügen, wo alert("LONG"); steht, aber ich bin mir nicht ganz sicher, was.

var maxLen = 10;
        console.log("Start");
        $('#send-txt').keyup(function(){
            var Length = $("#send-txt").val().length;
            var AmountLeft = maxLen - Length;
            $('#txt-length-left').html(AmountLeft);
            if(Length >= maxLen){
                alert("LONG");
            }



        });
23
Bill

Hier kommt's. Alles, was über die Zeichengrenze hinausgeht, wird entfernt. 

$('textarea').keypress(function(e) {
    var tval = $('textarea').val(),
        tlength = tval.length,
        set = 10,
        remain = parseInt(set - tlength);
    $('p').text(remain);
    if (remain <= 0 && e.which !== 0 && e.charCode !== 0) {
        $('textarea').val((tval).substring(0, tlength - 1));
        return false;
    }
})

Überprüfen Sie das Arbeitsbeispiel unter http://jsfiddle.net/JCehq/1/

25
Hussein

All diese Antworten sind etwas seltsam, da sie versuchen, zu viel zu tun. Eine einfachere und optisch ansprechendere Möglichkeit (weil der Text schnell abgeschnitten wird) - und mit weniger Seltsamkeiten wie im vorherigen Beispiel (beachten Sie, wie der letzte Schlüssel überschrieben wird?) - besteht einfach darin, die Anzahl der Zeichen auf keyUp abzuschneiden auf die Nummer, die erlaubt ist.

        var textlimit = 400;

        $('textarea').keyup(function() {
            var tlength = $(this).val().length;
            $(this).val($(this).val().substring(0, textlimit));
            var tlength = $(this).val().length;
            remain = textlimit - parseInt(tlength);
            $('#remain').text(remain);
         });    

Beachten Sie, dass dies auch für das Einfügen von Text funktioniert, da einige der obigen Beispiele dies nicht tun.

Beispiel hier: http://jsfiddle.net/PzESw/5/

36
daprezjer

Die Rückgabe von false und die Verwendung von .keypress () anstelle von .keyup () stoppt die Eingabe, sobald die Länge erreicht ist. Hier ist das Beispiel in einem jsFiddle:

http://jsfiddle.net/p43BH/1/

Aktualisiert, um Rücktaste zuzulassen.

3
Steve Claridge

Verstanden mit diesem:

$("#div_id").prop('maxlength', '80');

Ich weiß wirklich nicht, ob mit dieser Lösung etwas nicht stimmt, aber es hat für mich funktioniert.

3
user3460837

Eine einfache Möglichkeit, dies zu tun, besteht darin, den Text im Textbereich auf einen Teilstring des vollen Betrags zu setzen. Ein Beispiel finden Sie hier:

http://www.mediacollege.com/internet/javascript/form/limit-characters.html

2
Mark Hildreth

Wenn Sie Ihre Js so ändern, dass sie so aussieht, sollte dies für Sie funktionieren:

var $txtLenLeft = $('#txt-length-left'); // lets cache this since it isn't changing
$('#send-txt').keydown(function(e) { //take the event argument
   var Length = $(this).val().length; // lets use 'this' instead of looking up the element in the DOM
   var AmountLeft = maxLen - Length;
   $txtLenLeft.html(AmountLeft);
   if(Length >= maxLen && e.keyCode != 8){ // allow backspace
      e.preventDefault(); // cancel the default action of the event
   }
});

Ein Arbeitsbeispiel finden Sie hier: http://jsfiddle.net/aP5sK/2/

1

ehm, textarea maxlength ist ein gültiges Attribut in html5? wird in ie9 nicht unterstützt, das ist alles.

w3nerds http://www.w3.org/TR/html-markup/textarea.html#textarea.attrs.maxlength

w3fools http://www.w3schools.com/tags/att_textarea_maxlength.asp

1
commonpike

Ich denke am besten mit maxlenght property + jquery _ ​​keydown, keyup, paste events

// text input maximum lenght
$(document).on('keydown keyup paste', 'input[type=text]', function(e) {
  var textArea = $('input[type=text]').val(),
    textLenght = textArea.length,
    limit = $('textarea').attr('maxlength'),
    remain = 'left ' + parseInt(limit - textLenght) + ' chars';
  $('#remain-title').text(remain);
  if (textLenght > 500) {
    $('textarea').val((textArea).substring(0, limit))
  }
});

// tex area maximum lenght
$(document).on('keydown keyup paste', 'textarea', function(e) {
  var textArea = $('textarea').val(),
    textLenght = textArea.length,
    limit = $('textarea').attr('maxlength'),
    remain = 'left ' + parseInt(limit - textLenght) + ' chars';
  $('#remain-description').text(remain);
  if (textLenght > 500) {
    $('textarea').val((textArea).substring(0, limit))
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <label>Title</label>
  <p id="remain-title"></p>
  <input type="text" placeholder="Enter Title" maxlength="500"/>
</div>
<br>
<hr>
<br>
<div>
  <label>Description</label>
  <p id="remain-description"></p>
  <textarea placeholder="Enter custom description" rows="4" maxlength="500"></textarea>
</div>

Siehe JSFiddle

0
EgoistDeveloper

Ich finde, dass dies perfekt funktioniert und die überschüssigen Zeichen im Textbereich nicht vor dem Entfernen überlappt, wie dies bei einigen anderen Lösungen der Fall ist.

<h1>Add a comment:</h1>
<form>
    <textarea name="commentText" id="commentText"></textarea>
</form>
<br><span id="commentChars">1000</span> characters remaining

<script type="text/javascript">

    function checkChars(){
        var numChars = $('#commentText').val().length;
        var maxChars = 1000;
        var remChars = maxChars - numChars;
        if (remChars < 0) {
            $('#commentText').val($('#commentText').val().substring(0, maxChars));
                remChars = 0;
            }
        $('#commentChars').text(remChars);
    }

    $('#commentText').bind('input propertychange', function(){
        checkChars();
    });

    checkChars();

</script>
0
Dorian Fabre

Hier ist eine Lösung, die das HTML5-Datenattribut zum automatischen Binden an alle benötigten Textbereiche verwendet:

$('textarea[data-max-length]').live('keypress', function(e) {
    if (String.fromCharCode(e.charCode || e.keyCode).match(/\S/) && $(this).val().length >= $(this).attr('data-max-length')) {
        e.preventDefault();
    }
});
0
Mika Tähtinen

Ich weiß, das ist ein bisschen spät, aber ich musste auch das herausfinden. Ich musste es mit UTF8-Byte-Längen arbeiten lassen und bestimmte Tastendrücke zulassen. Folgendes habe ich mir ausgedacht:

checkContent = function (event) {

    var allowedKeys = [8,46,35,36,37,38,39,40];
    var contentLength = lengthInUtf8Bytes(jQuery(event.currentTarget).val());
    var charLength = lengthInUtf8Bytes(String.fromCharCode(event.charCode));

    if (charLength + contentLength > 20) {

        if(jQuery.inArray(event.keyCode, allowedKeys) == -1) {
            event.preventDefault();
        } 
    }
}

countLength = function(event) {

    var len = lengthInUtf8Bytes(jQuery(event.currentTarget).val());
    jQuery('#length').html(len);
}


lengthInUtf8Bytes = function(str) {
    var m = encodeURIComponent(str).match(/%[89ABab]/g);
    return str.length + (m ? m.length : 0);
}

jQuery(function(){jQuery("#textarea").keypress(function(event){checkContent(event)}).keyup(function(event){countLength(event)})});

Sie benötigen einen Textbereich mit der ID # Textarea und ein Element, um die aktuelle Länge mit der ID #length anzuzeigen. 

Das Tastendruckereignis bestimmt, ob der Tastendruck zugelassen wird oder nicht. Das Keyup-Ereignis zählt die Größe der Daten in dem Feld, nachdem der Tastendruck zugelassen/verhindert wurde.

Dieser Code funktioniert mit den folgenden Tasten: home, end, pagedown, pageup, backspace, löschen, auf, ab, links und rechts. Es behandelt nicht das Einfügen aus der Zwischenablage.

Hoffe, jemand findet es nützlich!

0
Andrew Plank

Versuche dies. Funktioniert auch für das Kopieren von Tastaturen:

$("#comments").unbind('keyup').keyup(function(e){
    var val = $(this).val();
    var maxLength = 1000;
    $('#comments').val((val).substring(0, maxLength));
    $("#comments_length").text($("#comments").val().length);
});
0
vinayjags
$("#message-field").on("keyup paste", function() {
  var $this, limit, val;
  limit = 140;
  $this = $(this);
  val = $this.val();
  $this.val(val.substring(0, limit));
  return $('#character-remaining').text(limit - $this.val().length);
});
0
Diego Plentz

Die Verwendung von Tastendruck und Tastendruck ist eine fehlerhafte Lösung, da ein Benutzer Daten kopieren und in den Textbereich einfügen kann, ohne eine Taste zu drücken.

Um die Textlänge in einem Textbereich mit Javascript zu begrenzen, unabhängig davon, wie die Daten dort eingehen, müssen Sie stattdessen auf einen setInterval-Timer zurückgreifen.

setInterval(function() {
if ($('#message').val().length > 250) {
    $('#message').val($('#message').val().substring(0, 250));
}}, 500);

Natürlich gehe ich davon aus, dass Sie Ihrem Textbereich eine ID der Nachricht zugewiesen haben.

0
Halfstop

versuche dies.

var charLmt = "200";//max charterer 
 $("#send-txt").keydown(function(){
   var _msgLenght = $(this).val().length;
   if (_msgLenght > charLmt) {
   $(this).val($(this).val().substring(0, charLmt));
  }
});
0
insCode