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 21 jQuery
jQuery鼠标悬停内容动画切换效果
Apr 27 jQuery
jquery仿微信聊天界面
May 06 jQuery
jQuery实现QQ空间汉字转拼音功能示例
Jul 10 jQuery
jQuery中each循环的跳出和结束实例
Aug 16 jQuery
jQuery实现全选、反选和不选功能
Aug 16 jQuery
jQuery实现的简单图片轮播效果完整示例
Feb 08 jQuery
jQuery - AJAX load() 实例用法详解
Aug 27 jQuery
jquery 插件重新绑定的处理方法分析
Nov 23 jQuery
Jquery属性的获取/设置及样式添加/删除操作技巧分析
Dec 23 jQuery
jQuery实现简单日历效果
Jul 05 jQuery
jquery简易手风琴插件的封装
Oct 13 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 curl 获取响应的状态码的方法
2014/01/13 PHP
php检测useragent版本示例
2014/03/24 PHP
php web环境和命令行环境下查找php.ini的位置
2019/07/17 PHP
JavaScript中URL编码函数代码
2011/01/11 Javascript
基于jQuery实现的水平和垂直居中的div窗口
2011/08/08 Javascript
jBox 2.3基于jquery的最新多功能对话框插件 常见使用问题解答
2011/11/10 Javascript
js获取class的所有元素
2013/03/28 Javascript
js仿百度贴吧验证码特效实例代码
2014/01/16 Javascript
Javascript单元测试框架QUnitjs详细介绍
2014/05/08 Javascript
JS在可编辑的div中的光标位置插入内容的方法
2014/11/20 Javascript
AngualrJS中的Directive制作一个菜单
2016/01/26 Javascript
js实现可键盘控制的简单抽奖程序
2016/07/13 Javascript
js 获取元素所有兄弟节点的实现方法
2016/09/06 Javascript
微信小程序 获取微信OpenId详解及实例代码
2016/10/31 Javascript
Vue+jquery实现表格指定列的文字收缩的示例代码
2018/01/09 jQuery
vue2.0获取鼠标位置的方法
2018/09/13 Javascript
react 中父组件与子组件双向绑定问题
2019/05/20 Javascript
原理深度解析Vue的响应式更新比React快
2020/04/04 Javascript
vuex页面刷新导致数据丢失的解决方案
2020/12/10 Vue.js
[01:05:40]VG vs Newbee 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/20 DOTA
Python探索之pLSA实现代码
2017/10/25 Python
全面分析Python的优点和缺点
2018/02/07 Python
小白如何入门Python? 制作一个网站为例
2018/03/06 Python
对python中的logger模块全面讲解
2018/04/28 Python
python3连接MySQL数据库实例详解
2018/05/24 Python
Python键盘输入转换为列表的实例
2018/06/23 Python
python使用协程实现并发操作的方法详解
2019/12/27 Python
Pycharm中配置远程Docker运行环境的教程图解
2020/06/11 Python
python中的插入排序的简单用法
2021/01/19 Python
详解基于canvas的视频遮罩插件
2018/01/04 HTML / CSS
好人好事演讲稿
2014/09/01 职场文书
2014年大学生社会实践自我鉴定
2014/09/26 职场文书
2014年学前班工作总结
2014/12/08 职场文书
逃课检讨书范文
2015/05/06 职场文书
房地产置业顾问工作总结
2015/10/23 职场文书
python如何正确使用yield
2021/05/21 Python