js控制文本框的最大长度（oninput事件）

 

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title></title>
 6     <script>
 7         function content(){
 8             var text=document.getElementById("textarea");
 9             //文本框可以接收的长度
10             var i=10;
11             //获取输入的文字的长度
12             var textLength=text.value.length;
13             if(i-textLength>=0){
14                 var divcontent=document.getElementById("num").innerText;
15                 document.getElementById("num").innerText="还可以输入"+(i-textLength)+"个字";
16             }
17 
18         }
19     </script>
20     <style>
21         #textarea{
22             height: 300px;
23             width: 500px;
24         }
25 
26         #num{
27             width: 200px;
28             height: 10px;
29         }
30     </style>
31 </head>
32 <body>
33 <div id="num">还可以输入10个字</div>
34 <br>
35 <br>
36 <!--maxlength设置文本框的最大长度-->
37 <textarea id="textarea" maxlength="10" oninput="content()">
38 
39 </textarea>
40 </body>
41 </html>

 

posted @ 2018-01-08 15:35  ztt_tttt  阅读(2432)  评论(0)  编辑  收藏  举报