Question

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

我还有一个按钮供用户清除文本区域的内容。

我遇到的问题是令我感到困惑的是，当用户点击清除按钮时，文本区域被清除，但字符数仍然保留在先前的计数，而实际上计数应为零。

我在绑定中使用了 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>

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

Answer 1

我发现代码中存在一些问题。首先，当您单击clear时，您没有重置textarea。其次，每次调用resetCharacterCount()时，都会绑定一个新的事件处理程序。

您应该创建一个仅负责重新计算文本计数并显示它的方法。并且只在启动时将事件绑定到textarea。这是一个工作示例:(请注意，我不知道numberal是什么，但我相信它是格式化单词计数，所以我所做的就是对其进行评论）

$(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/

Answer 2

我试试这个，它的工作！

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

清除textarea并重置textarea的字符数

2 个答案: