CODEWITHSUNDEEP
javascriptjqueryhtmlgoogle-chrometextarea
Divyesh
Divyesh

Reputation: 438

HTML - <textarea> tag difficulties

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.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>

Upvotes: 4

Views: 1053

Answers (4)

Vicky Gonsalves
Vicky Gonsalves

Reputation: 11707

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

Upvotes: 3

hvnis
hvnis

Reputation: 91

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

Upvotes: 2

Johan Br&#228;nnmar
Johan Br&#228;nnmar

Reputation: 916

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.com/tags/att_textarea_disabled.asp

Upvotes: 1

Iresha Rubasinghe
Iresha Rubasinghe

Reputation: 953

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

Upvotes: 2

Related Questions