如何结合jQuery与Flask-WTF实现TextAreaField实时字数统计功能

• 原jQuery选择器$("input[type='text']:not(:disabled)")仅匹配普通文本输入框，而Flask-WTF的TextAreaField渲染后是<textarea>标签，不会被匹配到，所以事件绑定完全失效
• 若页面存在多个对应不同提交项的Decline表单，共用id="word-count"会出现id重复冲突，导致统计结果显示错位

1. 先调整HTML代码部分 #

给textarea添加统一类名方便选择，同时给字数统计框的id加上submission.id避免重复，也可以通过data属性直接绑定对应统计框的选择器，避免后续逻辑混乱：

{% else %}
    <!-- 给统计框id加上submission.id，解决多表单场景下的id重复问题 -->
    <input type="text" id="word-count-{{ submission.id }}" disabled/>
    <!-- 给textarea添加自定义类名word-count-target，同时通过data属性绑定对应的统计框选择器 -->
    {{ decline_form.feedback(class="form-control form-control-lg word-count-target", data_count_target="#word-count-" ~ submission.id) }}
{% endif %}

2. 替换原有jQuery代码 #

把原来<script>标签内的所有代码替换为以下内容即可：

function wordCount(textareaElem) {
    const content = $(textareaElem).val();
    // 用正则匹配所有非空白字符组合，自动过滤连续空格、换行、制表符，统计结果比直接split(' ')更准确
    const matches = content.match(/\S+/g) || [];
    const wordNum = matches.length;
    // 从textarea的data属性中读取对应的统计框选择器
    const targetSelector = $(textareaElem).data('count-target');
    $(targetSelector).val(wordNum);
}
                         
$(function () {
    // 选择所有带word-count-target类的textarea元素
    $("textarea.word-count-target").each(function () {
        // 页面加载时先统计一次初始值
        wordCount(this);
        // 同时绑定keyup和input事件，覆盖键盘输入、粘贴、剪切、拖拽输入等所有输入场景
        $(this).on('keyup input', function () {
            wordCount(this);
        });
    });
});

修改后的代码同时支持单表单和多表单场景，统计逻辑覆盖了所有输入触发的情况，比原示例的统计准确性和兼容性更好。

内容的提问来源于stack exchange，提问作者Adventure-Knorrig