Javascript 多个textarea标记的字数限制

我有这个脚本来限制textarea上的单词，但我想对包含多个textarea标记的表单使用相同的函数

重复使用这个标签并为同一格式的每个textarea标签创建独立的字计数器和限制器的最佳方法是什么

先谢谢你

var-wordLimit=5；
变量字=0；
var jqContainer=$（“.my container”）；
var jqElt=$（“.my textarea”）；
函数charLimit（）
{
变量字=0；
var wordmatch=jqElt.val（）.match（/[^\s]+\s+/g）；
单词=单词匹配？单词匹配。长度：0；
如果（字数>字数限制）{
var trimmed=jqElt.val（）；
var lastChar=jqElt.val（）[trimmed.length]；
jqElt.val（trimmed+lastChar）；
}
$（'.word count'，jqContainer）.text（words）；
$（'.words left'，jqContainer）.text（Math.max（wordLimit words，0））；
}
jqElt.on（“keyup”，charLimit）；
charLimit（）

剩下的话
您可以将逻辑封装在函数中并重用该函数

见示例：


函数字计数器（容器、限制）{
var wordLimit=限制；
var jqContainer=$（容器）；
var jqElt=$（“textarea”，jqContainer）；
函数charLimit（）
{
变量字=0；
var wordmatch=jqElt.val（）.match（/[^\s]+\s+/g）；
单词=单词匹配？单词匹配。长度：0；
如果（字数>字数限制）{
var trimmed=jqElt.val（）；
var lastChar=jqElt.val（）[trimmed.length]；
jqElt.val（trimmed+lastChar）；
}
$（'.word count'，jqContainer）.text（words）；
$（'.words left'，jqContainer）.text（Math.max（wordLimit words，0））；
}
jqElt.on（“keyup”，charLimit）；
charLimit（）；
}
文字计数器（“.my-container1”，5）；
文字计数器（“.my-container2”，10）

剩下的话
剩下的话
如果textarea元素已更改，则可以使用通用函数（
$this
）。
对于相对元素，可以使用函数
。下一步（选择器）
您还可以从属性中读取参数（例如，
maxwords
）



var jqContainer=$（“.my container”）；
函数charLimit（）
{
变量字=0；
var jqElt=$（本）；
var wordLimit=jqElt.attr（“maxwords”）；
变量字=0；
var wordmatch=jqElt.val（）.match（/[^\s]+\s+/g）；
单词=单词匹配？单词匹配。长度：0；
如果（字数>字数限制）{
var trimmed=jqElt.val（）；
var lastChar=jqElt.val（）[trimmed.length]；
jqElt.val（trimmed+lastChar）；
}
jqElt.next（'.words left'）.text（Math.max（wordLimit words，0））；
}
$（“.my textarea”，jqContainer）.on（“keyup”，charLimit）.keyup（）；


剩下的话
剩下的话
如果需要使用相同的实现，您可以向要放入表单中的每个文本区域添加id，然后向指向相应文本区域的相应跨距添加属性
for=
，如下所示：



剩下的话
剩下的话
我通常会这样做：


创建一个处理字数的函数
refreshMaxWords（）
创建一个可以与元素绑定的挂钩


（函数（$）{
var refreshMaxWords=函数（$el）{
var-wordLimit=parseInt（$el.data（'max-words'））| | false，
wordmatch=$el.val（）.match（/[^\s]+\s+/g），
words=wordmatch？wordmatch.length:0，
//您可以在此处更改如何获取“words left”div
$wordsLeft=$el.parent（）.find（'.words left'）；
if（字限制！==false）{
如果（字数>字数限制）{
var trimmed=$el.val（）.split（/（？=[^\s]\s+/，wordLimit）。join（“”）；
var lastChar=$el.val（）[trimmed.length]；
$el.val（修剪+最后字符）；
}
}
如果（$wordsLeft.length>0）{
$wordsLeft.html（Math.max（wordLimit-words，0））；
}
};
$（函数（）{
$（document）.on（'keyup.count words'，'data max words'，函数（e）{
刷新Maxwords（$（this））；
});
});
})（jQuery）；

这是基于HTML的假设，如下所示：


输入#1
还剩5个字
输入#2
还剩10个字

这种方法的好处是：


更干净的代码结构
这可以在其他项目上重复使用

注意事项：
您实际上不需要将javascript封装在

（函数（$）{
//你的代码在这里
})（jQuery）；

我喜欢这样做，因为这样可以确保不会发生意外冲突。
我建议使用字符计数器而不是单词计数器，因为如果要限制字数，用户可以使用下划线或CAMELCASE是的，我理解，但是在这种情况下，我特别需要一个单词计数器，用于客户请求网站的表单类型。哦，我知道我会一直想，如果你在变量中获得值，比如
inputval
，不是更容易吗。然后使用
inputval.split（“”）.length
获取单词数量。然后，如果有太多的单词，您可以循环通过该数组并获得单词的数量，然后将输入字段设置为该值