如何限制 HTML 中文本区域的字数答案

【问题标题】：How to limit word count of a textarea in HTML如何限制 HTML 中文本区域的字数
【发布时间】：2020-07-31 09:09:56
【问题描述】：

所以我有一个文本区域，我试图限制字数。到目前为止，我的身体里有这个

<textarea id="theTextArea" rows="10" cols="50"></textarea>

还有这个功能

        function checkWordCount()  
                                   
        {
            var currStr = theTextArea.value;
            
            var tokens = currStr.split(" ");
            
            
            var numWords = tokens.length;
            
            wordCount.innerHTML = numWords;

            if (numWords > 24) {
                document.getElementById("theTextArea").disabled = true;
            }
        }

问题是我需要用户能够删除单词并在需要时添加新单词。这只是在 24 个单词后禁用它，他们不能再修改它了

【问题讨论】：

这会导致糟糕的用户体验。相反，显示剩余的字数和一条消息，指示剩余的字数/用户已经过去的字数。例如，在 Stack Overflow 上输入长评论。您将在 textarea 下方看到一个指示符，指示剩余字符数/您已经走了多远。完成整个想法会更好，然后返回并有选择地修剪它以满足长度要求，然后在中途被打断。
@meagar 现货！
在这里解决了类似的问题：stackoverflow.com/a/17909970/5373542

标签： javascript html

【解决方案1】：

我同意@meagar's comment，如果您不禁用textarea，UX 会更好，但如果单词太多，则显示错误。另外，不要忘记在后端添加此检查。

如果您仍然想“禁用”它 - 您应该将一个事件侦听器附加到 textarea，它会拦截按键并检查用户是否达到字数限制。如果是这样 - 防止按键的默认行为。这应该允许他删除单词。

但在您这样做之前，请考虑一下这个案例：我添加了 25 个单词。我想更换其中之一。所以我想添加一个然后删除一个。我不能按照你的逻辑这样做。相反，在每次按键时显示实时验证，计算字数，并在 textarea 附近显示。

【讨论】：

我已经有一条消息弹出，说他们没有字了，但我只是想要一种方法来限制字数，这样他们就不能再写了。字数显示我已经在我的代码的不同区域
在这种情况下，请参阅我的答案的第二段，它应该会有所帮助。