Max characters in textarea with jquery
Solution 1
Here it goes. Anything beyond character limit will be removed.
$('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;
}
})
Check working example at http://jsfiddle.net/JCehq/1/
Solution 2
All of these answers are a bit odd in that they try to do a little too much. A simpler and visually more pleasing way (because it shows the text quickly being cut off) - and with with less oddities that the previous example (note how it overwrites the final key?) - is to simply cut off the number of characters on keyUp to the number that's allowed.
var maxchars = 400;
$('body').on('keyup paste', 'textarea', function () {
$(this).val($(this).val().substring(0, maxchars));
var tlength = $(this).val().length;
remain = maxchars - parseInt(tlength);
$('#remain').text(remain);
});
Note that this then also works for pasting in text, as some of the examples above don't.
Example here: http://jsfiddle.net/PzESw/5/
Solution 3
Returning false and using .keypress() instead of .keyup() stops input once the length has been reached. Here's the example in a jsFiddle:
Updated to allow backspace.
Solution 4
Got it with this:
$("#div_id").prop('maxlength', '80');
I really dont know if there's something wrong with this solution, but it worked for me.
Solution 5
A simple way to do this is to set the text in the textarea to a substring of the full amount. You can find an example here:
http://www.mediacollege.com/internet/javascript/form/limit-characters.html
Bill
Updated on October 08, 2020Comments
-
Bill over 3 years
I have the following code, and I'm kind of stuck on what to do next. The idea is when you enter text into a text area a counter tells you how many characters you have left. Once you get to the max characters I want to stop allowing characters to be entered, or delete all the characters that were entered so there are only 10 characters in the text area. I know I have to put the code where it says
alert("LONG");
but I'm not quite sure what.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"); } });