HTML Tags - <textarea>

Question

Problems:

• If the length of the text area exceeds its limit, and we give input in the middle of the text, than we start with a truncated character from the end. But I do not want this textarea behavior.

  What I want, I only want to allow textarea, which takes only 4000 characters. and if the user is trying to enter an additional character that 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.com/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>

Run codeHide result

Answer 1

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);
            }); 

Answer 2

Try a simple HTML solution with maxlength

maxlength . .

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

Hide result

jQuery jQuery Max Length

Answer 3

: -

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

, 4000 . , 4000 , .

, JavaScript.

$(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));  
        }  
    })  
});

Answer 4

, >= 4000, .

Check out this link to learn more about textarea and the disabled attribute. http://www.w3schools.com/tags/att_textarea_disabled.asp