代码实例如下:

<!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. (转) Reinforcement Learning for Profit

    Reinforcement Learning for Profit July 17, 2016 Is RL being used in revenue generating systems today ...

  2. C# Regex.IsMatch （正则表达式验证:数字、小数点、邮件、计算表达式）

    public bool isInt(string str) { //^([+-]?)表示加减号只能出现在字符串开头且只有一位 ///d*表示后面可以有多个或一个十进制数 //$表示字符串结尾 retu ...

  3. android dimens 读取 px&dp问题

    1.dimens.xml文件:     <resources> <dimen name="area_margin_top">100dp</dimen& ...

  4. SpringMVC的各种参数绑定方式

    1. 基本数据类型(以int为例,其他类似):2. 包装类型(以Integer为例,其他类似):3. 自定义对象类型:4. 自定义复合对象类型:5. List绑定:6. Set绑定:7. Map绑定: ...

  5. .Net HttpPost的发送和接收示例代码

    /// <summary> /// 模拟http 发送post或get请求 /// </summary> /// <param name="Url"& ...

  6. FastJson的基本用法----转

    1. [文件] User.java ~ 243B   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 class User{     private int id;    ...

  7. JQUERY 拖拽 draggable droppable resizable selectable sortable

    今天用了jq ui的拖动碰撞功能,好不容易看到有详细的API解说,记录如下:   <script language="JavaScript" type="text/ ...

  8. AngularJs中的directives（指令part1）

    一.指令的职责   指令的职责是修改DOM结构,并将作用域和DOM连接起来.即指令既要操作DOM,将作用域内的数据绑定到DOM节点上,又要为DOM绑定事件调用作用域内的对应的方法. 二.创建自定义指令 ...

  9. Maven 依赖管理

    1  概念介绍 之前我们说过,maven 坐标能够确定一个项目.换句话说,我们可以用它来解决依赖关系.在 POM 中,依赖关系是在 dependencies部分中定义的.在上面的 POM 例子中,我们 ...

  10. Oracle与MySQL的几点区别

    Oracle数据库与MySQL数据库的区别是本文我们主要介绍的内容,希望能够对您有所帮助. 1.组函数用法规则 mysql中组函数在select语句中可以随意使用,但在oracle中如果查询语句中有组 ...