Javascript 清除textarea并重置textarea的字符计数

我有一个文本区。在文本区域下方，我可以显示用户键入时文本区域中的字符数

我还有一个按钮，用户可以清除文本区域的内容

我遇到的问题是，当用户单击“清除”按钮时，文本区域被清除，但字符计数保持在上一个计数，而实际上计数应为零

我在绑定中使用了keyup focus blur change，但当用户单击“清除”按钮时，字符计数仍然没有改变。在我用鼠标聚焦文本区域之前，计数的显示不会返回到零

有什么建议吗？

以下是我的HTML代码：

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

---

我注意到您的代码中存在一些问题。首先，当您单击“清除”按钮时，您没有重置文本区域。其次，每次调用

resetCharacterCount（）

时都要绑定一个新的事件处理程序

您应该创建一个只负责重新计算文本计数并显示它的方法。只有在启动时才将事件绑定到textarea。下面是一个工作示例：（请注意，我不知道

numberal

是什么，但我相信它正在格式化单词计数，所以我所做的只是对其进行注释）

---

JSFiddle:

我尝试了这个，它成功了

<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>

测试
限制为1000个字符
清楚的
$（文档）.ready（函数（）{
$（'id#u objective_details'）.keyup（函数（）{
$（'id_char_count'）.text（$（'id_objective_details'）.val（）.length）；
});
});
函数resetCharacterCount（）{
$（'#id_char_count'）。文本（0）；
$（'id#u objective_details'）.val（''；
}
函数focusTextArea（）{
$（'id#u objective_details'）。focus（）；
}

您能否更新您的问题是一个有效的代码片段，以便我们了解问题所在？什么是“数字”？

$(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();
}

<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>