Problems:

1. If textarea length exceeds its limit, and we give the input in the middle of the text than it start the truncate character from the end. But i don't want that textarea behavior.

   What I want is, I only want to allow textarea that takes only 4000 character. and if user try to enter extra character than it should not be allowed.

$(document).ready(function () {
    var cursorPosition=0;
    var enterKey_code=0;
    var maxlength=4000;
    var flag=0;
    
    function setSelectionRange(input, selectionStart, selectionEnd) {
        if (input.setSelectionRange) {
            input.focus();
            input.setSelectionRange(selectionStart, selectionEnd);
        }
        else if (input.createTextRange) {
            var range = input.createTextRange();
            range.collapse(true);
            range.moveEnd('character', selectionEnd);
            range.moveStart('character', selectionStart);
            range.select();
        }
    }

    function setCaretToPos (input, pos) {
        setSelectionRange(input, pos, pos);
    }
    
    $('#MaxChar').text(maxlength);
    
    function countChar(key_event){
        var text_value = $('#Comments').val();
        var cursorPosition = $('#Comments').prop("selectionStart");
        var len=text_value.length;							

        if (len > maxlength) {																							
            flag=1;
            $('#Comments').val(text_value.substring(0, maxlength));					
        }
        
        $('#CurrentChar').html($('#Comments').val().length);
    }

    $('#Comments').keyup(function (key_event) {
            countChar(key_event);
            
            if(flag==1)
            {
                var c=$('#Comments');
                setCaretToPos(c[0], cursorPosition+1);
                flag=0;
            }					
    });

     $('#Comments').keydown(function (key_event) {
            cursorPosition = $('#Comments').prop("selectionStart");
            countChar(key_event);
    }); 
});

<script src=".1.1/jquery.min.js"></script>
<div id="wrap">
		<label id="CurrentChar">0</label> / <label id="MaxChar">0</label>
		<br />
		<textarea rows="20" cols="40" id="Comments"></textarea> 
	</div>

Problems:

1. If textarea length exceeds its limit, and we give the input in the middle of the text than it start the truncate character from the end. But i don't want that textarea behavior.

   What I want is, I only want to allow textarea that takes only 4000 character. and if user try to enter extra character than it should not be allowed.

$(document).ready(function () {
    var cursorPosition=0;
    var enterKey_code=0;
    var maxlength=4000;
    var flag=0;
    
    function setSelectionRange(input, selectionStart, selectionEnd) {
        if (input.setSelectionRange) {
            input.focus();
            input.setSelectionRange(selectionStart, selectionEnd);
        }
        else if (input.createTextRange) {
            var range = input.createTextRange();
            range.collapse(true);
            range.moveEnd('character', selectionEnd);
            range.moveStart('character', selectionStart);
            range.select();
        }
    }

    function setCaretToPos (input, pos) {
        setSelectionRange(input, pos, pos);
    }
    
    $('#MaxChar').text(maxlength);
    
    function countChar(key_event){
        var text_value = $('#Comments').val();
        var cursorPosition = $('#Comments').prop("selectionStart");
        var len=text_value.length;							

        if (len > maxlength) {																							
            flag=1;
            $('#Comments').val(text_value.substring(0, maxlength));					
        }
        
        $('#CurrentChar').html($('#Comments').val().length);
    }

    $('#Comments').keyup(function (key_event) {
            countChar(key_event);
            
            if(flag==1)
            {
                var c=$('#Comments');
                setCaretToPos(c[0], cursorPosition+1);
                flag=0;
            }					
    });

     $('#Comments').keydown(function (key_event) {
            cursorPosition = $('#Comments').prop("selectionStart");
            countChar(key_event);
    }); 
});

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrap">
		<label id="CurrentChar">0</label> / <label id="MaxChar">0</label>
		<br />
		<textarea rows="20" cols="40" id="Comments"></textarea> 
	</div>

• javascript
• jquery
• html
• google-chrome
• textarea

• Please try this fiddle in chrome browser.....you will understand my problem jsfiddle/j2pz0tjg/2 – Divyesh Commented Jan 25, 2016 at 9:58
• no problem occurs if you try ONLY the <textarea maxlength='4000' rows="20" cols="40" id="Comments"></textarea> part without any JavaScript. – Iresha Rubasinghe Commented Jan 26, 2016 at 2:57

4 Answers 4

Try simple HTML solution with maxlength

maxlength Declares an upper bound on the number of characters the user can input. Normally the UI ignores attempts by the user to type in additional characters beyond this limit.

<textarea maxlength="4000"></textarea>

There is an alternate with jQuery plugin jQuery Max Length

simply use this:-

 <textarea maxlength='4000'  rows="20" cols="40" id="Comments"></textarea> 

it automatically stops when user types 4000 characters. That means though user type more than 4000 characters, they don't get insert into the text area.

If you further wants to prompt an warning message to user when the limit exceeds, just add the below simple JavaScript piece of code.

$(function() {  
    $("textarea[maxlength]").bind('input propertychange', function() {  
        var maxLength = $(this).attr('maxlength');  
        if ($(this).val().length >= maxLength) {  
            alert("Hello! I am an alert box!!");
            $(this).val($(this).val().substring(0, maxLength));  
        }  
    })  
});

Use this:

$('#Comments').keydown(function (key_event) {
                    var text_value = $('#Comments').val();
                    var len=text_value.length;
                    if (len > maxlength) {      
                        key_event.preventDefault();
                    }
                    cursorPosition = $('#Comments').prop("selectionStart");
                    countChar(key_event);
            }); 

On input check if the value in the textbox is >= 4000, then disable the textbox element.

Check this link for more info about textarea and the disabled attribute. http://www.w3schools./tags/att_textarea_disabled.asp