CODEWITHSUNDEEP
javascriptjqueryhtmlcounttextarea
DigiNet Events
DigiNet Events

Reputation: 347

Function for counting letters in multiple textareas

I"m trying to create a function to use for multiple textareas for counting the letters inside and show them in the title.

Here is what i have got so far, I"m trying to pass the variables to the function:

$('[name=messagetext]').keyup(countinput("[name=messagetext]", "#count_messagetext", "#000000"));
$('[name=messagetext]').keydown(countinput("[name=messagetext]", "#count_messagetext", "#000000"));

$('[name=abouttext]').keyup(countinput("[name=abouttext]", "#count_abouttext", "#000000"));
$('[name=abouttext]').keydown(countinput("[name=abouttext]", "#count_abouttext", "#000000"));

function countinput(name, countid, color) {
	var count = $(name).val().length;
	$(countid).text(count);
	if (count >= 170) {
		$(countid).css('color', '#ed7777');
		$(countid).css('font-weight', '600');
	} else {
		$(countid).css('color', color);
		$(countid).css('font-weight', '700');
	}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h3 style="text-align: center; font-size: 1.7rem; font-weight: 600; color: #414456;">Message (<span id="count_messagetext" value="0">0</span>/100)</h3>
<textarea rows="4" maxlength="100" style="height: auto !important;" name="messagetext" type="text" placeholder="Write your own message"></textarea>

<h3 style="text-align: center; font-size: 1.7rem; font-weight: 600; color: #414456;">About (<span id="count_abouttext" value="0">0</span>/100)</h3>
<textarea rows="4" maxlength="100" style="height: auto !important;" name="abouttext" type="text" placeholder="Write your own message"></textarea>

Upvotes: 0

Views: 65

Answers (2)

JJJJ
JJJJ

Reputation: 1358

You can just use a single event for this.

$('textarea').on('keydown, keyup', function(){
	
	var name = $(this).attr('name');
	var countid = $('#count_' + name);
	var count = $(this).val().length;
	
	//Default Color
	var color = '#000000';
	
	//You can just replace the default color here.
	if(name == 'messagetext'){
		color = '#000000';
	}else if(name == 'abouttext'){
		color = '#000000';
	}
	
	if (count >= 170) {
		$(countid).css('color', '#ed7777');
		$(countid).css('font-weight', '600');
	} else {
		$(countid).css('color', color);
		$(countid).css('font-weight', '700');
	}
	$(countid).html(count);
	
});
<h3 style="text-align: center; font-size: 1.7rem; font-weight: 600; color: #414456;">Message (<span id="count_messagetext" value="0">0</span>/100)</h3>
<textarea rows="4" maxlength="100" style="height: auto !important;" name="messagetext" type="text" placeholder="Write your own message"></textarea>

<h3 style="text-align: center; font-size: 1.7rem; font-weight: 600; color: #414456;">About (<span id="count_abouttext" value="0">0</span>/100)</h3>
<textarea rows="4" maxlength="100" style="height: auto !important;" name="abouttext" type="text" placeholder="Write your own message"></textarea>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Upvotes: 0

J&#233;r&#233;my
J&#233;r&#233;my

Reputation: 228

Here you go :)

What I changed is

  • It auto detect the <h3> we have to change the color so you don't have to specify it each time
$( object ).prev('h3')
  • Keydown event trigger both instead of duplicating the same line for both id
$('#messagetext, #abouttext').keydown
  • Auto find the span that need to have the number of letter and so no need to specify an id for it
$( object ).prev('h3').find('span').text(object.val().length);

So here is the code :

$('#messagetext, #abouttext').keydown(function() {
  countinput($(this), 'black') 
});

function countinput(object, color) {

    $( object ).prev('h3').find('span').text(object.val().length);

	if (object.val().length >= 5) {   
    
		$( object ).prev('h3').css('color', 'red');
        
		$( object ).prev('h3').css('font-weight', '600');
	}
	else {
		$( object ).prev('h3').css('color', color);
	  $( object ).prev('h3').css('font-weight', '700');
	}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<h3 style="text-align: center; font-size: 1.7rem; font-weight: 600; color: #414456;">Message (<span id="count_messagetext" value="0">0</span>/100)</h3>
<textarea rows="4" maxlength="100" style="height: auto !important;" id="messagetext" type="text" placeholder="Write your own message"></textarea>

<h3 style="text-align: center; font-size: 1.7rem; font-weight: 600; color: #414456;">About (<span id="count_abouttext" value="0">0</span>/100)</h3>
<textarea rows="4" maxlength="100" style="height: auto !important;" id="abouttext" type="text" placeholder="Write your own message"></textarea>

Upvotes: 1

Related Questions