代码实例如下:

<!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. java .net compartion

    1, http://www-01.ibm.com/software/smb/na/J2EE_vs_NET_History_and_Comparison.pdf http://stackoverflow ...

  2. MySQL删除重复记录只保留一条

    删除表中重复记录,只保留一条: delete from 表名 where 字段ID in (select * from (select max(字段ID) from 表名 group by 重复的字段 ...

  3. android loginDemo +WebService用户登录验证

        android loginDemo +WebService用户登录验证 本文是基于android4.0下的loginActivity Demo和android下的Webservice实现的.l ...

  4. c# 加密转载 备忘

    public sealed class EncryptUtils { #region Base64加密解密 /// <summary> /// Base64加密 /// </summ ...

  5. SQL注入脚本(基于时间)

    #encoding=utf-8 import httplib import time import string import sys import urllib header = {'Accept' ...

  6. python分割数组里面重复的元素

    c=[1,1,1,1,2,2,2,3,3,4,4,4,4,4,5,5,5,] a = [] x = [] for i in range(0,len(c)): if i + 1 < len(c): ...

  7. 用原生javascript做的一个打地鼠的小游戏

    学习javascript也有一段时间了,一直以来分享的都是一些概念型的知识,今天有空做了一个打地鼠的小游戏,来跟大家分享一下,大家也可以下载来增加一些生活的乐趣,下面P出代码:首先是HTML部分代码: ...

  8. 【jmeter】测试报告优化<二>

    如果按JMeter默认设置,生成报告如下: 从上图可以看出,结果信息比较简单,对于运行成功的case,还可以将就用着.但对于跑失败的case,就只有一行assert错误信息.(信息量太少了,比较难找到 ...

  9. sphinx 配置sphinx.conf

    sphinx的配置文件是在配置的时候最容易出错的了: 基本概念: source:数据源,数据是从什么地方来的. index:索引,当有数据源之后,从数据源处构建索引.索引实际上就是相当于一个字典检索. ...

  10. Javascript中函数的四种调用方式

    一.Javascript中函数的几个基本知识点: 1.函数的名字只是一个指向函数的指针,所以即使在不同的执行环境,即不同对象调用这个函数,这个函数指向的仍然是同一个函数. 2.函数中有两个特殊的内部属 ...