代码实例如下:

<!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))，截取字符串，

如何限制textarea文本框的输入字数的更多相关文章

  1. Jquery实现 TextArea 文本框根据输入内容自动适应高度

    原文 Jquery实现 TextArea 文本框根据输入内容自动适应高度 在玩微博的时候我们可能会注意到一个细节就是不管是新浪微博还是腾讯微博在转发和评论的时候给你的默认文本框的高度都不会很高,这可能 ...

  2. html5 textarea 文本框根据输入内容自适应高度

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...

  3. tableView的footerView下面的颜色修改、限制文本框的输入字数

  4. JS实现动态提示文本框可输入剩余字数(类似发表微博数字提示)

    一.实现效果: 为了更直观的体现用户在文本框输入文本时能看到自己输入了多少字,项目中需要通过判断提示文本框剩余可输入字数. html & JS: <div> <textare ...

  5. jQuery实现限制input框 textarea文本框输入字符数量的方法

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  6. 限制文本框只能输入数字或浮点数的JS脚步

    1.oninput,onpropertychange,onchange的用法 l          onchange触发事件必须满足两个条件: a)当前对象属性改变,并且是由键盘或鼠标事件激发的(脚本 ...

  7. replace限制文本框只能输入数字，数字和字母等的正则表达式

    1.文本框只能输入数字代码(小数点也不能输入) <input onkeyup="this.value=this.value.replace(/\D/g,'')" onafte ...

  8. bootstrap中使用modal加载kindeditor时弹出层文本框不能输入的问题

    答案来自老外http://stackoverflow.com/questions/14795035/twitter-bootstrap-modal-blocks-text-input-field $( ...

  9. js正则表达式限制文本框只能输入数字,小数点,英文字母

    1.文本框只能输入数字代码(小数点也不能输入)<input onkeyup="this.value=this.value.replace(/\D/g,'')" onafter ...

随机推荐

  1. 用 jQuery 实现表单验证（摘抄）

    ——选自<锋利的jQuery>(第2版)第5章的例题  5.1.5 表单验证 表单作为 HTML 最重要的一个组成部分,几乎在每个网页上都有体现,例如用户提交信息.用户反馈信息和用户查询信 ...

  2. Cannot unwrap to requested type [javax.sql.DataSource]

    遇上这个bug我的情况是这样,hibernate4以后,spring3.1不再有hibernateDaoSupport,在dao层不能继承HibernateDaoSupport, 只能显式声明Sess ...

  3. tomcat-8.0

    https://tomcat.apache.org/tomcat-8.0-doc/introduction.html

  4. Undefined symbols for architecture i386: "MyGetOpenALAudioData(__CFURL const*, int*, int*, int*)"

    今天把apple developer上的例子程序oalTouch中的MyOpenALSupport.h和MyOpenALSupport.c添加到自己的工程中,并在另一个文件xxx.cpp里调用,结果出 ...

  5. Storyboard 跳转 和 传值

    因为苹果推 Storyboard 而且 目前来看, Apple Watch 也是用 Storyboard 就知道, 明天应用估计都是 Storyboard 的天下了. (水平有限, 不对之处在所难免, ...

  6. Redis 利用锁机制来防止缓存过期产生的惊群现象-转载自 http://my.oschina.net/u/1156660/blog/360552

    首先,所谓的缓存过期引起的“惊群”现象是指,在大并发情况下,我们通常会用缓存来给数据库分压,但是会有这么一种情况发生,那就是在一定时间 内生成大量的缓存,然后当缓存到期之后又有大量的缓存失效,导致后端 ...

  7. js调用ajax

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  8. Sublime发布Markdown博客

    Sublime发布Markdown博客 下载Sublime插件 插件 按照上面网页中的说明操作 修改插件包中的文件cnblogs.py 第84行,'author'改为自己的邮箱 第86行,'categ ...

  9. Python(迭代器 生成器 装饰器 递归 斐波那契数列)

    1.迭代器 迭代器是访问集合元素的一种方式.迭代器对象从集合的第一个元素开始访问,直到所有的元素被访问完结束.迭代器只能往前不会后退,不过这也没什么,因为人们很少在迭代途中往后退.另外,迭代器的一大优 ...

  10. PHP中使用CURL实现get和post请求（总结）

    一.什么是curl curl是利用url语法在命令行方式下工作的开源文件传输工具. 二.PHP curl函数