jquery实现限制textarea输入字数的方法


Posted in jQuery onSeptember 06, 2017

jquery怎么实现限制textarea输入的字数呢?有需要的朋友可以参考一下我写的例子,当然如果有误,也希望大家能及时指出来,大家共同学习进步。

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>textarea 限制字数</title>
 <style>
  .container{
   position: relative;
   width: 730px;
  }
  .container span{
   position: absolute;
   bottom: 20px;
   right: 30px;
  }
 </style>
</head>
<body>
 <div class="container">
  <textarea name="content" id="content" cols="100" rows="10"></textarea>
  <span>0/10</span>
 </div>
 <script src="http://libs.baidu.com/jquery/2.0.0/jquery.js"></script>
 <script>
  $(function(){
    /**
    * textarea 限制输入字数
    * @param string str 类名或ID
    * @param number num 限制输入的字数
    */
   function limitImport(str,num){
    $(document).on('input propertychange',str,function(){
     var self = $(this);
     var content = self.val();
     if (content.length > num){
      self.val(content.substring(0,num));
     } 
     self.siblings('span').text(self.val().length+'/'+num);
    });
   }

   //用法示例
   limitImport('#content',10);

  })
 </script>
</body>
</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

jQuery 相关文章推荐
jQuery实现动态生成表格并为行绑定单击变色动作的方法
Apr 17 jQuery
jQuery自定义元素右键点击事件(实现案例)
Apr 28 jQuery
jquery实现简单实用的轮播器
May 23 jQuery
jQuery.Form实现Ajax上传文件同时设置headers的方法
Jun 26 jQuery
jquery版轮播图效果和extend扩展
Jul 18 jQuery
jQuery菜单实例(全选,反选,取消)
Aug 28 jQuery
通过jquery toggleClass()属性制作文章段落更改背景颜色
May 21 jQuery
jQuery实现点击旋转,再点击恢复初始状态动画效果示例
Dec 11 jQuery
jQuery实现ajax的嵌套请求案例分析
Feb 16 jQuery
jQuery实现为table表格动态添加或删除tr功能示例
Feb 19 jQuery
jquery validate 实现动态增加/删除验证规则操作示例
Oct 28 jQuery
jQuery实现可编辑的表格
Dec 11 jQuery
jquery实现用户登陆界面(示例讲解)
Sep 06 #jQuery
jQuery实现注册会员时密码强度提示信息功能示例
Sep 05 #jQuery
jquery+css实现下拉列表功能
Sep 03 #jQuery
jQuery中.attr()和.data()的区别分析
Sep 03 #jQuery
jQuery Ajax向服务端传递数组参数值的实例代码
Sep 03 #jQuery
jquery tmpl模板(实例讲解)
Sep 02 #jQuery
jQuery EasyUI结合zTree树形结构制作web页面
Sep 01 #jQuery
You might like
PHP利用APC模块实现文件上传进度条的方法
2015/01/26 PHP
PHP实现二叉树的深度优先与广度优先遍历方法
2015/09/28 PHP
PHP实现导出excel数据的类库用法示例
2016/10/15 PHP
thinkPHP3.2.3实现阿里大于短信验证的方法
2018/06/06 PHP
CSS3画一个阴阳八卦图
2021/03/09 HTML / CSS
JS 实现完美include载入实现代码
2010/08/05 Javascript
juqery 学习之五 文档处理 包裹、替换、删除、复制
2011/02/11 Javascript
jquery 插件学习(六)
2012/08/06 Javascript
使用js操作cookie的一点小收获分享
2013/09/03 Javascript
查看大图功能代码jquery版
2013/11/05 Javascript
使用jQuery实现星级评分代码分享
2014/12/09 Javascript
Bootstrap中datetimepicker使用小结
2016/12/28 Javascript
微信小程序 支付功能实现PHP实例详解
2017/05/12 Javascript
微信小程序swiper组件用法实例分析【附源码下载】
2017/12/07 Javascript
vue-better-scroll 的使用实例代码详解
2018/12/03 Javascript
nodejs使用async模块同步执行的方法
2019/03/02 NodeJs
vue实现登录页面的验证码以及验证过程解析(面向新手)
2019/08/02 Javascript
如何使用gpu.js改善JavaScript的性能
2020/12/01 Javascript
Python中用max()方法求最大值的介绍
2015/05/15 Python
恢复百度云盘本地误删的文件脚本(简单方法)
2017/10/21 Python
详解Django-restframework 之频率源码分析
2019/02/27 Python
Python3使用TCP编写一个简易的文件下载器功能
2019/05/08 Python
python 机器学习之支持向量机非线性回归SVR模型
2019/06/26 Python
python中sort和sorted排序的实例方法
2019/08/26 Python
pytorch下大型数据集(大型图片)的导入方式
2020/01/08 Python
pytorch 实现在一个优化器中设置多个网络参数的例子
2020/02/20 Python
Python MySQL 日期时间格式化作为参数的操作
2020/03/02 Python
Java爬虫技术框架之Heritrix框架详解
2020/07/22 Python
Python内置函数及功能简介汇总
2020/10/13 Python
Django haystack实现全文搜索代码示例
2020/11/28 Python
教师个人自我鉴定
2014/02/08 职场文书
公司委托书范本
2014/04/04 职场文书
2014年教务工作总结
2014/12/03 职场文书
婚宴邀请函
2015/01/30 职场文书
python实现股票历史数据可视化分析案例
2021/06/10 Python
用php如何解决大文件分片上传问题
2021/07/07 PHP