Clear textarea and reset character count of textarea
<p>I have a text area. Underneath the text area I can display the count of the characters in the text area as the user types.</p>

<p>I also have a button for the user to clear the contents of the text area.</p>

<p>The issue I have and I am baffled by is that when the user clicks on the clear button, the text area is cleared, but the character count remains at the previous count, when actually the count should be zero.</p>

<p>I have used <strong>keyup focus blur change</strong> in the bind, but the character count still does not change when the user clicks on the clear button. The display of the count does not return to zero, until I focus in the text area with the mouse.</p>

<p><strong>Any suggestions?</strong></p>

<p>Here is my HTML code:</p>

<pre><code>&lt;textarea cols="40" id="id_objective_details" maxlength="1000" name="objective_details" rows="10"&gt;Test&lt;/textarea&gt;

&lt;span id="id_char_count"&gt;&lt;/span&gt;&lt;span&gt; of 1,000 character limit&lt;/span&gt;

&lt;i id="id_icon_reset" class="fa fa-ban blue_color icon_size20" rel="tooltip" html="true" data-placement="top" onclick="resetCharacterCount();focusTextArea();" title="Clear"&gt;&lt;/i&gt;
</code></pre>

<p>Here is the JS / JQ code:</p>

<pre><code>$(document).ready(function() {
    // bind displaying the character count of the text area to the keyup event (function on base.html).
    displayCharacterCount('id_objective_details', 'id_char_count');
}

function displayCharacterCount(id1, id2) {
    $('#' + id1).bind("keyup focus blur change", function () {
        numeral.language('{{ LANGUAGE_CODE }}');
        var charCount = numeral($(this).val().length).format('0,0');
        $("#" + id2).text(charCount);
    });
}

function resetCharacterCount() {
    displayCharacterCount('id_objective_details', 'id_char_count');
}

function focusTextArea() {
    $('#id_objective_details').focus();
}
</code></pre>