WP Engineer

Comment Length Limiter

If you have used Twitter, then you know that you are only allowed to type 140 characters in a single Tweet. There is a nice little number below the text field indicating how much is left to write.

It would be nice to have this feature for WordPress comments too. Or any text field, for that matter. It can be done with the following piece of JavaScript:

jQuery(function($) {
	// configure
	var comment_input = $( '#commentform textarea' );
	var submit_button = $( '#commentform .form-submit' );
	var comment_limit_chars = 1000;
	// stop editing here
	
	// display how many characters are left
	$( '
' + comment_limit_chars + ' characters left
' ).insertAfter( comment_input );
	
	comment_input.bind( 'keyup', function() {
		// calculate characters left
		var comment_length = $(this).val().length;
		var chars_left = comment_limit_chars - comment_length;
		
		// display characters left
		$( '.comment_limit_info span' ).html( chars_left );
		
		// hide submit button if too many chars were used
		if (submit_button)
			( chars_left < 0 ) ? submit_button.hide() : submit_button.show();
	});
});

https://gist.github.com/1422754

The first three vars below the // configure comment can be edited.
comment_input is the DOM element of the text field.
submit_button is the DOM element for the button to submit the form.
Finally, comment_limit_chars is the amount of characters allowed.

This snippet automatically inserts a div tag below the text field and updates the character count when the user types. The submit_button is optional. Set the var to null if you don't want it to be grayed out.

Please keep in mind that this only validates the input on the client side. If you have to rely on the maximum text length, like Twitter does, you need to check the length on the back end side with PHP too.

Guest Post

This post is written by Eric Teubert - www.satoripress.com and is a post in our Advent Calendar on WP Engineer about WordPress.
Thank you very much from my part to Eric.
If you also like to have your interesting post published on our website, please let us know on our contact page. Of course we will appreciate your contribution!

Posted

in

by

Frank

Tags:

, , , , , ,

Comments

5 responses to “Comment Length Limiter”

  1. Adventskalender am 9. Dezember « F-LOG-GE

    […] WPEngineer lernen wir, wie wir die Länge der Kommentartexte beschränken können und ein beständiges Feedback über die verbleibenden Zeichen zeigen […]

  2. WPTavern: Limiting The Amount Of Text In Comments | WordPress Planet

    […] s1.parentNode.insertBefore(s, s1); })(); TweetEric Teubert over at WPEngineer has shared some Javascipt code that can be used to limit the amount of text that users can place within the comments field or any […]

  3. Jürgen Rabe Avatar
    Jürgen Rabe

    Huhu,

    vielen Dank dafür 🙂 Gefällt mir sehr gut, hab allerdings einen kleinen Verbesserungsvorschlag, da ich es für sinnvoller halte den Submit-Button auf disabled zu setzen, anstelle ihn auszublenden. Zusätzlich könnte man noch die Textausgabe rot färben, wenn man die max. Zeichenanzahl überschritten hat.


    jQuery(function($) {
    // configure
    var comment_input = $( '#commentform textarea' );
    var submit_button = $( '#commentform .form-submit #submit' );
    var comment_limit_chars = 1000;
    // stop editing here

    // display how many characters are left
    $( '' + comment_limit_chars + ' characters left' ).insertAfter( comment_input );

    comment_input.bind( 'keyup', function() {
    // calculate characters left
    var comment_length = $(this).val().length;
    var chars_left = comment_limit_chars - comment_length;

    // display characters left
    $( '.comment_limit_info span' ).html( chars_left );

    // disable submit button if too many chars were used and add css class "commentInputError" to the characters left ouput "comment_limit_info"
    if( chars_left < 0 )
    {
    submit_button.attr('disabled', 'disabled');
    $( '.comment_limit_info' ).addClass('commentInputError');
    }
    else
    {
    submit_button.removeAttr('disabled');
    $( '.comment_limit_info' ).removeClass('commentInputError');
    }
    });
    });

    Viele Grüße
    Jürgen

  4. Jürgen Rabe Avatar
    Jürgen Rabe

    Achja, natürlich sollte man in die eigenen Styles natürlich auch


    .commentInputError
    {
    color: red !important;
    }

    o.ä. integrieren 🙂

  5. Darren Grant Avatar
    Darren Grant

    I’ve done something similar lately by using a maxLength attribute of the textareas. Then applying the jQuery for managing the counter using a selector for any textareas that have a maxLength set, so you don’t even need to apply a specific class to them! Some older browsers (I think you know which ones) don’t seem to recognise the maxLength attribute so you need to truncate the input if it exceeds the maximum on keyup and paste events.