jQuery Counter: Stopp-Typ, wenn die Grenze erreichen

Question

Ich erstelle einen Zähler für den Textbereich und für jetzt ich Erfolg, die Länge zu zählen, aber ich möchte, nachdem es das Limit erreichen, kann der Benutzer nicht mehr tippen.

Wie kann man aufhören zu schreiben, wenn das Limit erreicht?

$('textarea').keyup(function() { 
    var max = 10; 
    var len = $(this).val().length; 
    var char = max - len; 
    if (len >= max) { 
    $(this).parent().find('.counter').text(char + '/'+max); 
    $(this).parent().find('.counter').css({"color":"red"}); 
    } 
    else { 
    $(this).parent().find('.counter').text(char + '/'+max); 
    $(this).parent().find('.counter').css({"color":"#ccc"});  
    } 
}); 

here die jsfiddle https://jsfiddle.net/5vf8pce3/

Answer 1

Sie können:

1) Änderung keyup zu keydown und return false;. Fiddle: https://jsfiddle.net/mrlew/5vf8pce3/4/

2) oder verwenden Sie maxlength attribute (HTML5).

<textarea maxlength="10"></textarea> 

Answer 2

Try this:

var maxLength = 10; 
 
$('textarea').keyup(function() { 
 
    var length = $(this).val().length; 
 
    var length = maxLength-length; 
 
    $(this).parent().find('.counter').text(length +"/"+maxLength); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> 
 
<textarea class="form-control" maxlength="10" rows="3"></textarea> 
 
<span class="counter"></span>

Answer 3

Die jQuery-Handler ein Objekt nehmen. Was ich meine ist, dass die Funktion, die das keyup-Ereignis behandelt, ein Objekt annehmen kann, das das Ereignis enthält. Das Ereignis kann dann mit der Funktion preventDefault() abgebrochen werden. Festcode:

$('textarea').keyup(function (event) { 
    var max = 10; 
    var len = $(this).val().length; 
    var char = max - len; 
    if (len >= max) { 
    $(this).parent().find('.counter').text(char + '/'+max); 
    $(this).parent().find('.counter').css({"color":"red"}); 
    event.preventDefault(); 
    } 
    else { 
    $(this).parent().find('.counter').text(char + '/'+max); 
    $(this).parent().find('.counter').css({"color":"#ccc"});  
    } 
}); 

Answer 4

versuchen Sie dieses ..

$('textarea').keyup(function() { 
var max = 10; 
var len = $(this).val().length; 
var char = max - len; 
if (len >= max) { 

$(this).parent().find('.counter').text(char + '/'+max); 
$(this).parent().find('.counter').css({"color":"red"}); 
$(this).attr('disabled', 'disabled'); 
} 
else { 
    $(this).parent().find('.counter').text(char + '/'+max); 
    $(this).parent().find('.counter').css({"color":"#ccc"});  
} 
});