Fatal编程技术网
  • javascript/
  • Javascript 如何限制多个文本区域的字数？

Javascript 如何限制多个文本区域的字数？

javascript jquery

Javascript 如何限制多个文本区域的字数？,javascript,jquery,Javascript,Jquery,我对4个文本区域的字数限制为300字，即4个文本区域的字数不应超过300字。尽管我已经阅读了许多关于这方面的文章，但这些文章只显示在单个文本区域中，我如何才能做到这一点。更新：单词计数，而不是字符计数 注意，此代码不会检查复制粘贴计数。为此： 要么我必须禁用复制粘贴。（功能丧失） 或者我应该在粘贴后删除文本。（数据丢失） 我不明白为什么这会是个问题。您可以尝试以下方法： $（函数（）{ $（“textarea”）.keydown（函数（）{ val=0； $（“textarea”）。每个（函数

我对4个文本区域的字数限制为300字，即4个文本区域的字数不应超过300字。尽管我已经阅读了许多关于这方面的文章，但这些文章只显示在单个文本区域中，我如何才能做到这一点。

更新：单词计数，而不是字符计数

注意，此代码不会检查复制粘贴计数。为此：

  • 要么我必须禁用复制粘贴。（功能丧失）
  • 或者我应该在粘贴后删除文本。（数据丢失）
    • 我不明白为什么这会是个问题。您可以尝试以下方法：

    $（函数（）{
$（“textarea”）.keydown（函数（）{
val=0；
$（“textarea”）。每个（函数（）{
如果（$（this.val（）.trim（）.length>0）
val+=$（this.val（）.trim（）.replace（/\s+/gi''）.split（''）.length；
});
如果（val>300）
返回false；
});
});

    

    1）这可以通过声明一个全局变量来实现，该变量保存所有三个文本区域中的单词计数
    
2） 每个文本区域的Onkeyup事件增加声明的全局变量并检查当前值。如果小于400，则允许输入else警报或根据需要执行操作
    
检查以下样本
    

                <html>
        <script>
        var globalCount=0;
        function fun1(){
                globalCount=document.getElementById("text1").value.length+document.getElementById("text2").value.length+document.getElementById("text3").value.length+document.getElementById("text4").value.length
                if(globalCount>=400){
                alert("max word count reached");
                //do what needs to be done 
                }

        }

        </script>
        <body>
          <textarea name="t1" id="text1" cols="30" rows="10"  onkeyup="fun1()"></textarea>
          <textarea name="t2" id="text2" cols="30" rows="10"  onkeyup="fun1()"></textarea>
          <textarea name="t3" id="text3" cols="30" rows="10"  onkeyup="fun1()"></textarea>
          <textarea name="t4" id="text4" cols="30" rows="10" onkeyup="fun1()"></textarea>
             </body>
    </html>

    

    
var globalCount=0；
函数fun1（）{
globalCount=document.getElementById（“text1”）.value.length+document.getElementById（“text2”）.value.length+document.getElementById（“text3”）.value.length+document.getElementById（“text4”）.value.length
如果（全局计数>=400）{
警报（“达到最大字数”）；
//做需要做的事
}
}

    我想这是一个选择。只需更改
    限制
    ，以满足您的需求，例如300。我把它放在3进行测试。好的一面是，这样我们就不会禁用
    keyup
    事件处理程序，如果我们超过
    限制
    则通过使用
    substr
    和当前的
    值.length-1
    来切断
    文本区域
    。因此，例如，如果我在第一个
    textarea
    中键入3个单词，并且达到限制，我仍然可以从第一个
    textarea
    中删除一个单词，然后将其键入第二个
    textarea
    ，如果在
    限制达到后
    返回false
    ，这是不可能的。为了检测复制/粘贴操作，我添加了
    粘贴
    侦听器，并检查我们是否达到了忽略粘贴的单词数超过实际单词数的限制。但即使在
    文本区域
    中也可以进行粘贴
    


    $（函数（）{
var总计=0，
极限=3，
$textArea=$（'textArea'）；
函数addToTotal（集合、粘贴或计数）{
var-wordCount=0；
$textArea.each（函数（索引、元素）{
if（！！element.value.match（/\S+/g））{
wordCount+=element.value.match（/\S+/g）.length；
}
});
如果（pastedWordCount！==undefined&&pastedWordCount！==0）{
wordCount=粘贴的ordcount；
}
返回字数；
}
$textArea.on（“键控”，函数（）{
总计=总计（$textArea）；
如果（总数>限额）{
this.value=this.value.substr（0，this.value.length-1）；
}
});
$textArea.on（“粘贴”，函数（evt）{
var pasteDataWordCount=0；
if（！！evt.originalEvent.clipboardData.getData（'text'）.match（/\S+/g））{
pasteDataWordCount=evt.originalEvent.clipboardData.getData（'text'）.match（/\S+/g）.length；
}
总计+=合计（$textArea，pasteDataWordCount）；
如果（总数>限额）{
返回false；
}
});
});

    

    在单个文本区域中，什么方法最适合您。修改它以适用于多个文本区域可能比创建/搜索新的解决方案更容易。300个单词或300个字符？你真的应该重新阅读这个问题。他们想阻止所有
    元素的组合字数超过300。@Oka非常感谢。@PraveenKumar 300不是400。；-）@大卫杜曼更新@Praveen：上面计算了文本区域中的字符数。如何检查复制和粘贴计数…@Shaan_14你检查了我的答案了吗？@Praveen Kumar非常喜欢你的解决方案，特别是因为它非常紧凑。不过，你的限制超出了一个字符。@Praveen:我检查了你的答案&我同意DavidDomain的说法