how to limit number of characters in a textarea fi

Question

I am using a a textarea field in a form that is made on html and the processing is done by php. I want to limit the number of characters the user can enter in the textarea. Is there any way by which this can be done because the textarea field is then stored into a mysql database and thus i have to limit the user data according to the varchar value of the field.

Any help?

Answer 1

This is a very easy way to limit the length of a text area via JavaScript.

text area field:

<input class='textField' type='text' NAME='note1' value='' onkeyup='charLimit(this, 40);'>

JavaScript function:

function charLimit(limitField, limitNum) {
  if (limitField.value.length > limitNum) {
   limitField.value = limitField.value.substring(0, limitNum);}
}

When the user types past 40 characters it just removes them.

Answer 2

You can limit this by setting maxlength attribute on textarea tag like <textarea maxlength="120"></textarea> in HTML and additionally "cut" input string in PHP by substr() function.

Answer 3

<script type="text/javascript">
        $(document).ready(function(){
        var maxChars = $("#sessionNumtext");
        var max_length = maxChars.attr('maxlength');
        if (max_length > 0) {
            maxChars.bind('keyup', function(e){
                length = new Number(maxChars.val().length);
                counter = max_length-length;
                $("#sessionNum_counter").text(counter);
            });
        }
    });
</script>

<textarea name="sessionNumtext" id="sessionNumtext" maxlength="20" type="text"></textarea>
kalan karakter sayısı: <span id="sessionNum_counters">20</span>

Answer 4

As mentioned by s.webbandit you can use maxlength, but note that this is a new feature introduced in HTML5, as W3 Schools article about <textarea>, so "bulletproof" solution needs Javascript. So maxlength is not supported in Internet Explorer until version 10 and in Opera not at all.

Here is one approach that uses Javascript to help you out:

<script language="javascript" type="text/javascript">
   function charLimit(limitField, limitCount, limitNum) {
    if (limitField.value.length > limitNum) {
      limitField.value = limitField.value.substring(0, limitNum);
  } else {
      limitCount.value = limitNum - limitField.value.length;
       }
    }
</script>

You can then use it like this (original source):

    <textarea name="limitedtextarea" onKeyDown="charLimit(this.form.limitedtextarea,this.form.countdown,100);">
    </textarea>

This should get you going.

Answer 5

I've tried a lot of different ways to limit text in textareas, and the best I have found (client side) is with the jQuery.Maxlength.js plugin. Simple quick and covers them all!

Step 1. Include Maxlength plugin script

<script language="javascript" src="jquery.maxlength.js"></script>

Step 2. Add maxlength attribute to

<textarea maxlength="35" 
    rows="5" cols="30" name="address"></textarea>

Step 3. Initialize plugin

<script type="text/javascript">
    $(document).ready(function($) {
             //Set maxlength of all the textarea (call plugin)
             $().maxlength();
    })
</script>

https://github.com/viralpatel/jquery.maxlength