JQuery textarea character count issue when typing

Question

I'm having an issue with a character count function on a form textarea. There are a host of solutions available on the web and I've come across a very handy snippet shown below which will output the number of characters left in the specified area on the page:

var maxLength = 1000;
jQuery('.your-enquiry').keyup(function() {
  var length = jQuery(this).val().length;
  var length = maxLength-length;
  console.log(length + "characters remaining");
  jQuery('#counter').text(length);
});

You can see that I am outputting the length variable to the console window in a bid to see what my problem is. It seems that as soon as I release a key length is assigned a value of X and then immediately assigned 1000 again.

Here is an example of my output:

995characters remaining (index):542 
1000characters remaining (index):542

When I check line 542 of my code it is:

console.log(length + "characters remaining");

How come length is being output twice every time!? and effectively resetting itself? Am I using the wrong type of event on the textarea? Ideally I'd like the counter to update in real time as the user types.

Some side information if it's helpful...

I am using Contact Form 7 version 4.5.1 to create the form. My HTML output looks like this:

    <div>
<span class="wpcf7-form-control-wrap your-enquiry">
<textarea name="your-enquiry" cols="40" rows="10" maxlength="1000" minlength="10" class="wpcf7-form-control wpcf7-textarea wpcf7-validates-as-required your-enquiry" aria-required="true" aria-invalid="false"></textarea></span>
    <p id="counter">1000</p>
    </div>

NOTE: Just did a quick bit of research on the keyUp event and apparently it is triggered every time a Key is released. Which makes sense but confuses me as my value is being output twice.

I am using the sample from here: http://geoffmuskett.com/really-simple-jquery-character-countdown-in-textarea/ - probably better practice not to declare twice so I'm guessing a typo in this case. However this hasn't resolved the issue. — Javacadabra, Nov 15 '16 at 12:10
I'm wondering if the issue is due to the fact that by default the `CF7` plugin calls keyup when user is typing?? — Javacadabra, Nov 15 '16 at 12:16
Perhaps. Or if you are good with chrome debugger, you can try monitoring the events. http://stackoverflow.com/questions/10213703/how-do-i-view-events-fired-on-an-element-in-chrome-web-developer — Mandeep Jain, Nov 15 '16 at 12:29

score 0 · Answer 1 · answered Nov 15 '16 at 12:16

0

Working fine:

// HTML
<textarea class="your-enquiry" cols="40" rows="10" maxlength="1000" minlength="10"></textarea>
<p id="counter">1000</p></div>

// jQuery
var maxLength = 1000;
$('.your-enquiry').keyup(function() {
  var length = jQuery(this).val().length;
  var length = maxLength-length;
  console.log(length + "characters remaining");
  jQuery('#counter').text(length);
});

http://codepen.io/paulcredmond/pen/YpWRdY

answered Nov 15 '16 at 12:16

Paul Redmond

3,276
4
32
52

Yeah, It's looking like this may be the Contact Form 7 plugin calling the keyup function by default or something – Javacadabra Nov 15 '16 at 12:17
I tend to strip back code to the basics to check if anything is causing issues. – Paul Redmond Nov 15 '16 at 12:18
1

Maybe link the event off an ID or another class not linked to contact-form 7. – Paul Redmond Nov 15 '16 at 12:18
Good call - I'll try and let you know what happens – Javacadabra Nov 15 '16 at 12:19

Archin Modi · Answer 2 · 2016-11-15T12:30:59.750

$(document).ready(function() {
    var text_max = 1000;    

    $('.your-enquiry').keyup(function() {
        var text_length = $('.your-enquiry').val().length;
        var text_remaining = text_max - text_length;

        $('#textarea_feedback').html(text_remaining + ' characters remaining');
    });
});

html { margin:11px }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<textarea class="your-enquiry" rows="8" cols="30" maxlength="99" ></textarea>
<div id="textarea_feedback"></div>

JQuery textarea character count issue when typing

2 Answers2