如何限制textarea文本框的输入字数

时间：2023-02-11 10:31:56
代码实例如下:

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>如何限制文本框的输入长度</title>
<script type="text/javascript" src="http://www.softwhy.com/mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(function(){
  $("textarea[maxlength]").keyup(function(){
    var area=$(this);
    var max=parseInt(area.attr("maxlength"),10);
    if(max>0){
      if(area.val().length>max){
        area.val(area.val().substr(0,max));
      }
    }
  })
  $("textarea[maxlength]").blur(function(){
    var area=$(this);
    var max=parseInt(area.attr("maxlength"),10);
    if(max>0){
      if(area.val().length>max){
        area.val(area.val().substr(0,max));
      }
    }
  })
});
</script>
</head>
<body>
<textarea  maxlength="10"></textarea>
</body>

</html>

以上代码实现了我们的需要，可以将输入文本的长度限制为10，无论是键盘输入还是复制黏贴都可以实现限制，下面就简单介绍一下实现过程。
一.实现原理:
当 用键盘输入的时候，通过为keyup事件绑定事件处理函数，然后通过此函数判断当键盘按键弹起时当前文本框的文本长度是否超出了指定值，如果超出举截取， 否则保持原长度。当使用复制黏贴的时候，通过判断当文本框失去焦点时文本框的文本长度是否超出指定值，入股超出就自动截取。
二.代码注释:
1.$(function(){ }，文档结构完全加载完毕再去执行函数中的代码。
2.$("textarea[maxlength]").keyup(function(){}，为具有maxlength属性的textarea文本框注册keyup事件处理函数。
3.var area=$(this)，将当前对象转换成jquery对象。
4.var max=parseInt(area.attr("maxlength"),10)，获取输入长度的最大值。可以参阅JavaScript的parseInt()函数一章节。
5.area.val(area.val().substr(0,max))，截取字符串，

相关文章