jquery计算文本字符个数-优快云博客

本文介绍了一个简单的网页示例，使用HTML与jQuery实现输入框字符计数功能，当用户在文本框或文本域中输入内容时，实时显示已输入的字符数量，并在达到预设的最大长度时给出提示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="utf-8">
 5     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6     <title></title>
 7     <script src="js/jquery-1.11.1.js" type="text/javascript"></script>
 8 </head>
 9 <style>
10   #sNum,#sNum2{  height:20px; border:1px solid #ccc; padding: 5px;  margin:20px 40px; display: inline-block;  }
11   #inputV{width: 100px; height: 20px; margin:20px 40px; }
12   #inputV2{width:200px; height:80px; margin:20px 40px; }
13 </style>
14 <body>
15     <span id="sNum"></span>
16     <input type="text" placeholder="nini" id="inputV" />
17     <span id="sNum2"></span>
18     <textarea placeholder="nini" id="inputV2"></textarea>
19     <script  type="text/javascript" charset="utf-8">
20         $(function(){
21               var inputV = $('#inputV');
22                var sNum = $('#sNum').html();
23               var euTextLen=0;
24               var inputLen = inputV.val().length;
25              
26              function textInput(obj,objch,nums,textContent ){
27                 $(obj).keyup(function(){
28                 var euTextLen= $(obj).val().length;
29                 $(objch).html(euTextLen);
30                   if(euTextLen >= nums ){
31                     alert(textContent);
32                 }
33                 })
34             }
35             textInput('#inputV','#sNum',1000,'djfkljaslkjsalk');
36             textInput('#inputV2','#sNum2',500,'123132132');
37             if(inputLen==0){
38                 $('#sNum,#sNum2').html(euTextLen); 
39               }
40          
41            
42               
43         })
44     </script>
45 </body>
46 </html>