清除文本区域并重置文本区域的字符数 [英] 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 of the text area.

我感到困惑的是，当用户单击清除按钮时，文本区域被清除，但字符数仍保持在以前的数上，而实际上该数应为零.

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.

我在绑定中使用了 keyup焦点模糊更改，但是当用户单击清除按钮时，字符数仍然没有变化.直到我用鼠标聚焦在文本区域时，计数的显示才会恢复为零.

I have used keyup focus blur change 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.

有什么建议吗?

这是我的HTML代码:

Here is my HTML code:

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

这是JS/JQ代码:

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

推荐答案

我尝试了一下，它就可以了！

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>

这篇关于清除文本区域并重置文本区域的字符数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！