0%

Hey! Do you have any query related to front end?

Sign in Sign up

Characters limit in textareaBack

Specification:

Limit characters in textarea and restrict user to type further and make user to add only one space between words.

//Set number of charecters limit
var max_chartecter = 100;
//Eqaute remaining charectera with max charectera first time
var charLeft = max_chartecter;
$(document).ready(function(){
	//Remove any charecters fro textarea on load
	$('textarea').prop('value','');
	//Show max charecters in the display area
	$('textarea').next('p').find('span').text(max_chartecter);
});
//Keydown event for textarea
$('textarea').keydown(function(){
	countCharecters($(this));
});
//Keyup event for textarea
$('textarea').keyup(function(){
	countCharecters($(this));
});

function countCharecters(elem){
	//Variable to store textarea value
	var commentVal = elem.val();
	//Replace space from either side except one
	commentVal = commentVal.replace(/\s\s+/g, ' ');
	//Set value property to textarea
	elem.prop('value',commentVal);
	//Count number of charecters have been entered
	var textareaVal_length = commentVal.length;
	//get difference of total charecters and chatecters entered
	charLeft = max_chartecter - textareaVal_length;

	if(charLeft > 0){		
		//Enter the charecters left in span of p tag to display result
		elem.next('p').find('span').text(charLeft);
	}else{
		//Finally grab characters from 0 to max charecters limit
		commentVal = commentVal.substring(0, max_chartecter);
		//and set to textarea value property
		elem.prop('value',commentVal);
		//Enter the charecters left in span of p tag to display result
		elem.next('p').find('span').text(0);
	}
}

It is required to give both keydown and keyup event. Because, if anybody press any key for long time then, characters become uncountable and result goes beyond scope. So to finally get the required amount of characters, keyup event is necessary

How to comment:

  • Create an account in discuss by clicking on login next to arrow.
  • Create password for discuss and varify your email id, through your mail.
  • Refresh page and comment.

You might also like

  • Centralize your content

    Position your content according to your choice

    • 221
    • 5
    • 221
    • facebook icon
    • twitter icon
    • google plus
  • Load images visible to user after page load

    Load only those image which is visible to visitor

    • 299
    • 8
    • 299
    • facebook icon
    • twitter icon
    • google plus
  • Inner page scrolling effect

    Simple jQuery content slider plugin

    • 326
    • 2
    • 326
    • facebook icon
    • twitter icon
    • google plus

Latest quries posted

gopa kumarabout 3 years ago

amit singhabout 3 years ago

rahmat aliabout 3 years ago

mandavi tiwariabout 3 years ago

rahul sharmaabout 3 years ago

Ask question
Latest video
Learn Angular
Profile pic
Guest Back
Username
Password