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>