代码实例如下:

<!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. linux下Redis与phpredis扩展安装

    ++++++++++++++++++++++++++++++++++++++++++++++linux下Redis与phpredis扩展安装++++++++++++++++++++++++++++++ ...

  2. JVM ，JIT ,GC RUNTIME 解析

    Java Class字节码知识点回顾 https://yq.aliyun.com/articles/2358?spm=5176.8067842.tagmain.105.fQdvH3 JVM Class ...

  3. mybatis 批量插入和where条件使用

    <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE mapper PUBLIC "-/ ...

  4. ROW_NUMBER、RANK、DENSE_RANK的用法

    --NND,索性把2005的一起帖出来. ROW_NUMBER.RANK.DENSE_RANK的用法 (爱新觉罗.毓华 -- 广东深圳) SQL Server 引入几个新的排序(排名)函数,如ROW_ ...

  5. 023. Asp.net参数化查询预防Sql注入攻击

    /// <summary> /// 参数化查询预防SQL注入式攻击 /// </summary> public int checkLogin(string loginName, ...

  6. Java 实现学生信息管理系统

    编写一个简单的学生管理信息系统. 在oracle中设计一张学生表,以学号作为关键字. 其他学生信息有:姓名.手机号. 在进入系统时,显示如下菜单: ************************** ...

  7. oracle定时运行 存储过程

    /* 查询: select job,broken,what,interval,t.* from user_jobs t; job job的唯一标识,自动生成的 broken 是否处于运行状态,N;运行 ...

  8. 【oracle】 linux 下oracle 启动监听错误

    Message 1070 not found; No message file for product=network, facility=TNSTNS-12545: Message 12545 no ...

  9. android外包公司——最新案例铁血军事手机客户端（IOS & Android）

    <铁血军事>Android手机客户端由铁血网开发和运营,为网友提供铁血论坛和铁血读书两大产品.使用Android手机客户端,您不仅可以阅读到最新军事资讯,随时参与精彩话题讨论,还可以在线阅 ...

  10. SSH_框架整合3-删除

    一.普通删除 1 完善src中 类: (1)EmployeeDao.java中: //2 删除 public void delete(Integer id){ String hql="DEL ...