[Resolved] Character Count – counting Up – CRED and Types Fields

[Author]

Posts

[Gavin]

I would like to apply a character count to a CRED field, but counting up. In effect, the reverse of this:

https://toolset.com/forums/topic/how-do-i-add-a-character-counter/

... so that the character counter shows something like '# of 300'.

Equally, I'd like to apply a character count to a Types field, again counting up, the reverse of this:

https://toolset.com/forums/topic/limit-the-number-of-words-or-characters-in-editor/

I've successfully implemented both the above as countdowns, but now need to countup in other areas.

Thanks. Gavin.

[Nigel]

Hi Gavin

You can add the following code to your CRED form to add a counter for, in this example, a Types multiline field (a textarea) with a slug of 'description':

( function( $ ) {
	$( document ).ready( function(){

		// insert div to display char count
		$('textarea[name="wpcf-description"]').after("<div class='char-count'>0</div>");

		// listen for keyup and update the count
		$('textarea[name="wpcf-description"]').keyup( function(){ 

			var chars = $('textarea[name="wpcf-description"]').val().length;

			$('.char-count').html( chars );
		});
	});
})( jQuery );

You can use the same code for the same Types field in the backend with a minor modification. The name convention is slightly different, and you need to replace each instance of 'wpcf-description' with 'wpcf[description]'.

To add code to the backend you would need to enqueue it, or you can print it directly into the footer using the following which you add to your theme's functions.php file:

/**
 * Char counter
 */
add_action( 'admin_print_footer_scripts', 'tssupp_add_field_counter' );
function tssupp_add_field_counter() {
    ?>
    <script type="text/javascript">
		( function( $ ) {
			$( document ).ready( function(){

				// insert char-count field
				$('textarea[name="wpcf[description]"]').after("<div class='char-count'>0</div>");

				//listen for keyup
				$('textarea[name="wpcf[description]"]').keyup( function(){ 

					var chars = $('textarea[name="wpcf[description]"]').val().length;

					$('.char-count').html( chars );
				});
			});
		})( jQuery );
     </script>
    <?php
}