Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Max characters in textarea with jquery

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");             }            }); 
like image 519
Bill Avatar asked Mar 13 '11 20:03

Bill


People also ask

How do I limit characters in a textarea?

Note − By default, we can enter data in a textarea upto 5,24,288 characters. In some cases, there is a need of putting a limit on the size of characters that can be typed in a textarea. So in that case, we can use maxlength attribute to control the number of characters entered in a textarea.

How do you limit character input in textarea including count in jQuery?

Limit character input in the textarea including count. JavaScript Code : var maxLength = 15; $('textarea'). keyup(function() { var textlen = maxLength - $(this).

How to limit the input characters in text field in jQuery?

We create an input text area with a given maxlength and then use jQuery code to limit the characters. First, we set the max limit and then use keyup() method to reduce the textarea character limit by 1 when we click the button and display the count on the screen. Syntax: var max_length = 25; $('textarea').

How do I count characters in a textarea jQuery?

<textarea id="field" onkeyup="countChar(this)"></textarea> function countChar(val){ var len = val. value. length; if (len >= 500) { val. value = val.


2 Answers

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/

like image 53
Jeremy L. Avatar answered Oct 14 '22 14:10

Jeremy L.


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/

like image 28
Hussein Avatar answered Oct 14 '22 15:10

Hussein