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实现图片平滑滚动详解
Mar 22 jQuery
jQuery使用unlock.js插件实现滑动解锁
Apr 04 jQuery
jQuery用户头像裁剪插件cropbox.js使用详解
Jun 07 jQuery
jQuery扇形定时器插件pietimer使用方法详解
Jul 18 jQuery
详解在vue-cli中引用jQuery、bootstrap以及使用sass、less编写css
Nov 08 jQuery
jQuery实现通过方向键控制div块上下左右移动的方法【测试可用】
Apr 26 jQuery
jQuery实现每隔一段时间自动更换样式的方法分析
May 03 jQuery
基于jQuery实现无缝轮播与左右点击效果
May 13 jQuery
jQuery中将json数据显示到页面表格的方法
May 27 jQuery
jQuery实现的监听导航滚动置顶状态功能示例
Jul 23 jQuery
AJAX在JQuery中的应用详解
Jan 30 jQuery
基于jquery ajax的多文件上传进度条过程解析
Sep 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魔术方法与魔术变量、内置方法与内置变量的深入分析
2013/06/03 PHP
php堆排序(heapsort)练习
2013/11/13 PHP
ThinkPHP实现带验证码的文件上传功能实例
2014/11/01 PHP
织梦sitemap地图实时推送给百度的教程
2015/08/03 PHP
一个判断email合法性的函数[非正则]
2008/12/09 Javascript
jQuery EasyUI 中文API Button使用实例
2010/04/14 Javascript
jquery easyui 结合jsp简单展现table数据示例
2014/04/18 Javascript
js操作iframe父子窗体示例
2014/05/22 Javascript
javascript实现十秒钟后注册按钮可点击的方法
2015/05/13 Javascript
JS+CSS实现另类带提示效果的竖向导航菜单
2015/10/15 Javascript
分享两款带遮罩的jQuery弹出框
2015/12/30 Javascript
JS实现点击Radio动态更新table数据
2017/07/18 Javascript
JavaScript实现删除数组重复元素的5种常用高效算法总结
2018/01/18 Javascript
JS中移除非数字最多保留一位小数
2018/05/09 Javascript
使用pm2自动化部署node项目的方法步骤
2019/01/28 Javascript
功能完善的小程序日历组件的实现
2020/03/31 Javascript
详解阿里Node.js技术文档之process模块学习指南
2021/01/04 Javascript
python获取一组数据里最大值max函数用法实例
2015/05/26 Python
Python编程使用*解包和itertools.product()求笛卡尔积的方法
2017/12/18 Python
python决策树之CART分类回归树详解
2017/12/20 Python
Python简单计算给定某一年的某一天是星期几示例
2018/06/27 Python
Python动态导入模块的方法实例分析
2018/06/28 Python
python简单鼠标自动点击某区域的实例
2019/06/25 Python
python+OpenCV实现车牌号码识别
2019/11/08 Python
python 导入数据及作图的实现
2019/12/03 Python
Python txt文件常用读写操作代码实例
2020/08/03 Python
Python如何使用vars返回对象的属性列表
2020/10/17 Python
Python爬虫抓取论坛关键字过程解析
2020/10/19 Python
opencv python 对指针仪表读数识别的两种方式
2021/01/14 Python
VELTRA台湾:世界自由行专家
2017/08/15 全球购物
什么是Smart Navigation?
2016/07/03 面试题
人事任命书怎么写
2014/06/05 职场文书
质检员岗位职责范本
2015/04/07 职场文书
2015年员工试用期工作总结
2015/05/28 职场文书
导游词之杭州岳王庙
2019/11/13 职场文书
62句有关感恩节文案(推荐收藏)
2019/11/28 职场文书