Clear Textarea And Reset Character Count Of Textarea

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. I also have a button for the user to clear the contents o

Solution 1:

I notice a few problems in your code. First you are not resetting the textarea when you click the clear. Second, you are binding a new event handler each time you call resetCharacterCount().

You should create a method that is responsible only for re-calculating the text count and display it. And you bind the events to textarea only on start up. Here is a working example: (Note that I don't know what numberal is, but I believe it is formatting the word count, so all I did is to comment it up)

$(document).ready(function() {
    // bind displaying the character count of the text area to the keyup event (function on base.html).
    var id_objective_details_elem = $('#id_objective_details');
    // bind the event
    bindCharacterCount('id_objective_details', 'id_char_count');
    // calculate the word count on setup
    displayCharacterCount.call(id_objective_details_elem, 'id_char_count');
    // bind onClick event to reset button
    $('#id_icon_reset').click(function(e) {
        // clear the text in textarea
        id_objective_details_elem.text('');
        resetCharacterCount()
        focusTextArea();
    });
});

function displayCharacterCount(id2) {
    var charCount = $(this).val().length;
    // uncomment the following line in your production project
    // numeral.language('{{ LANGUAGE_CODE }}');
    // var charCount = numeral($(this).val().length).format('0,0');
    $("#" + id2).text(charCount);
}

function bindCharacterCount(id1, id2) {
    $('#' + id1).bind("keyup focus blur change", function () {
        displayCharacterCount.call(this, id2);
    });
}

function resetCharacterCount() {
    // instead of binding the events again, directly call displayCharacterCount
    displayCharacterCount.call($('#id_objective_details'), 'id_char_count');
}

function focusTextArea() {
    $('#id_objective_details').focus();
}

JSFiddle: https://jsfiddle.net/3ah7Lywg/

Solution 2:

I try this and it's work!

<textarea cols="40" id="id_objective_details" maxlength="1000" name="objective_details" rows="10">Test</textarea>

<span id="id_char_count"></span><span> of 1,000 character limit</span>

<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">clear</i>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js">    </script>
<script>

$(document).ready(function() {
    $('#id_objective_details').keyup(function(){
        $('#id_char_count').text($('#id_objective_details').val().length);
    });
});

function resetCharacterCount() {
    $('#id_char_count').text(0);
    $('#id_objective_details').val('');
}

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