限制多行文本输入字符限制和显示

最新推荐文章于 2021-07-06 13:28:29 发布

alongshow

最新推荐文章于 2021-07-06 13:28:29 发布

阅读量925

点赞数

分类专栏： js jquery html 文章标签： input class javascript action function jsp

本文链接：https://blog.csdn.net/alongshow/article/details/7455824

版权

js jquery html 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

<html>
 <head>

  <title>My JSP 'index.jsp' starting page</title>

 </head>
 <script language="JavaScript">
 
     function CountStrByte(Message,Total,Used,Remain){
         var LastCount=0;
      var ByteCount=0;
      var StrValue=Message.value;
      var StrLength=Message.value.length;
      var MaxValue = Total.value;
      if(LastCount != StrLength){
       for(i=0;i<StrLength;i++){
        ByteCount = (StrValue.charCodeAt(i)<=256)?ByteCount+1:ByteCount+2;
        if(ByteCount > MaxValue){
         Message.value=StrValue.substring(0,i);
         alert("留言内容最多不能超过"+MaxValue+"个字节!\n注意:一个汉字为两个字节.");
         ByteCount = MaxValue;
         break;
        }
       }
       Used.value = ByteCount;
       Remain.value = MaxValue - ByteCount;
       LastCount = StrLength;
      }
     }
  </script>
 <body>
 <form action="index.jsp" name="form">
  留言
  <textarea rows="9" cols="50" name="content" class="wenbenkuang"
   id="content"
   οnkeydοwn="CountStrByte(this.form.content,this.form.total,this.form.used,this.form.remain);"
   οnkeyup="CountStrByte(this.form.content,this.form.total,this.form.used,this.form.remain);""></textarea>
  <br>
  最多允许
  <input name="total" type="text" disabled class="noborder" id="total"
   value="1600" size="4">
  个字节 已用字节； 
  <input name="used" type="text" disabled class="noborder" id="used"
   value="0" size="4">
  剩余字节:
  <input name="remain" type="text" disabled class="noborder" id="remain"
   value="1600" size="4">
   <br>
   <input type="submit" value="测试">
   </form>
 </body>
</html>