Limit Characters in textareas – Reopening

[Mad Dog]

I’m now getting around to trying to limit the number of characters when adding or editing the Description in Community Events as well as a custom textarea. In an earlier support request I was pointed to http://stackoverflow.com/questions/5533053/textarea-character-limit which has a very lightweight nice way to do this. But….it relies on the textarea having an ID.

The custom textarea has an ID but the Description only has a name and no ID. How can I target that or is there a hook to add an ID to it?

I’d rather not resort to validating it since people could type a lot and then find out they have to edit it. I’d rather they saw a character count or were just stopped before they went too far.

Thanks!
Mad Dog

[Mad Dog]

This reply is private.

[Geoff]

Hey Mad Dog,

Nice work getting that to stick!

I think you’re right and should probably include that script by enqueuing it in your theme (or child theme’s) functions.php file so you don’t lose the work on a plugin update.

You might be able to add an ID to the element via JS/jQuery a la:

$(element).attr('id', 'newID');

Cheers!
Geoff

[Mad Dog]

Thanks for the kind words. I added this in a child file so it won’t be affected by a plugin update though I will take it out of there.

I’ll mess with the jQuery though that’s not my area of expertise. I still find it odd that the textarea element for Description on the Community Events Add/Modify screen has a Name (tcepostcontent) assigned but not an ID assigned to it. Especially since my Custom Field textarea has both. Is this a coding oversight?

MD

[Geoff]

My pleasure and thanks for following up!

Community Events actually uses the same post editor fields as WordPress does on the back end, so any ID there (if there is one) should be on the front end as well. Community Events isn’t touching that part of the code at all. 🙂

Geoff

[Mad Dog]

When I look at the raw Post Edit in WP (text view without TinyMCE) and inspect it, the TextArea has a Name, ID and Class.

[Geoff]

Those are perhaps specific to the post editor rather than a front-end view. Community Events does nothing to effect the markup there, but it’s possible that WordPress adds those attributes for admin/back-end of the site.

[Mad Dog]

Well, I got it all working, including adding an ID to the text area. In a few minutes I think I’ll post my solution here so anyone searching can see it.

One (hopefully) last question: I pulled the <scripts> out of the child version of edit-event.php and am inserting it via a function using tribe_events_community_before_the_content. It works fine. Okay, two questions:

– Is there a better hook to use?

– I actually feel like it would be better to put this into a .js file and then use the hook to call that file. Seems cleaner (and less cluttered in functions.php). If that sounds like a good way to go, where should I put the .js file and how should I call it? I’m not sure where in the child file structure under theme/tribe-events/etc it should go.

Pretty slick!

[Mad Dog]

For anyone wanting to add a Character counter to a text area (such as in the Add an Event or Modify an Event pages), here’s what I did that worked really well. It’s based on http://jsfiddle.net/X28Xe/2/ which came from I believe a post on Stack Overflow but I lost track of it so I can’t give the original person credit. Sorry. But thanks to him!

<script>
jQuery(document).ready(function ($) {
    // Set your character limit
    var count_limit = 10;

    // Set the initial symbol count on page load
    $('#excerpt-wc span').text($('#excerpt').val().length);

    $('#excerpt').on('keyup', function () {
        var char_count = $(this).val().length;
        var excerpt = $(this).val();

        // Update the character count on every key up
        $('#excerpt-wc span').text(char_count);

        if (char_count >= count_limit) {
            $('#excerpt-wc').css('color', 'red');
            $(this).val(excerpt.substr(0, count_limit));
        } else {
            $('#excerpt-wc').css('color', null);
        }

    }).after('<p id="excerpt-wc">Count: <span>0</span></p>');
});
</script>

Basically, change the ID “excerpt” to whatever your textarea ID is. Do keep the “-wc” suffix though! Change the character count and you’re good.

I’m using this in the file: edit-event.php

If you want to use this for the Description textarea you have to add a line to the top of the code. For some reason that textarea has no ID so you need to add this right after the opening <script>:

    // Add ID to Description textarea
	$('textarea[name=tcepostcontent]').attr('id','tcepostcontent');

Make sure “tcepostcontent” is the name of that textarea (it was for me) and if you want to use a different ID change the last one on the line.

I first added this in the child verstion of edit-event.php but decided to keep things cleaner and pull it out. I created a function using “tribe_events_community_before_the_content” to insert it. I might put it in a separate .js file and just call that file into the page with a function….(see following response from support about that).

I hope this is clear!

MD

[Geoff]

Right on and nice work, Barry! It’s awesome of you to share both your questions and solutions here for the rest of the community. 🙂

Is there a better hook to use?

Nah, I think that’s a great one to use. That’s a nice early hook prior to the form loading. You could go with tribe_events_community_after_the_content instead or even more general with tribe_events_after_the_html to insert it after the entire The Events Calendar markup. No need to change though, especially if it works as is.

where should I put the .js file and how should I call it?

I do think calling a JS file would be super clean. I sometimes create a folder in my child theme structure specifically for new JS files (e.g. /themes/[child-theme]/js) and place them in there so they can be called directly from the child theme functions file. From there, you can call it using the wp_enqueue_script function.

I’ll go ahead and close this thread since you artfully answered it and shared the solution. I appreciate your help here and thanks for reaching out!

Geoff

[Author]

Posts