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平滑滚动到顶部插件使用详解
May 08 jQuery
jQuery、layer实现弹出层的打开、关闭功能
Jun 28 jQuery
使用jquery的jsonp如何发起跨域请求及其原理详解
Aug 17 jQuery
jquery写出PC端轮播图实例
Jan 26 jQuery
vue+jquery+lodash实现滑动时顶部悬浮固定效果
Apr 28 jQuery
jQuery AJAX 方法success()后台传来的4种数据详解
Aug 08 jQuery
IE8中jQuery.load()加载页面不显示的原因
Nov 15 jQuery
jquery获取file表单选择文件的路径、名字、大小、类型
Jan 18 jQuery
jQuery实现动态添加和删除input框代码实例
Mar 29 jQuery
jquery+php后台实现省市区联动功能示例
May 23 jQuery
jquery实现商品sku多属性选择功能(商品详情页)
Dec 20 jQuery
jQuery实时统计输入框字数及限制
Jun 24 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编程获取各个时间段具体时间的方法
2017/05/26 PHP
兼容ie和firefox js关闭代码
2008/12/11 Javascript
Javascript 验证上传图片大小[客户端]
2009/08/01 Javascript
jquery下为Event handler传递动态参数的代码
2011/01/06 Javascript
精通Javascript系列之Javascript基础篇
2011/06/07 Javascript
JS按位非(~)运算符与~~运算符的理解分析
2011/07/31 Javascript
jquery时间下拉框小例子
2013/04/15 Javascript
求数组最大最小值方法适用于任何数组
2013/08/16 Javascript
文本域光标操作的jQuery扩展分享
2014/03/10 Javascript
js修改onclick动作的四种方法(推荐)
2016/08/18 Javascript
vuejs2.0实现分页组件使用$emit进行事件监听数据传递的方法
2017/02/22 Javascript
关于jquery form表单序列化的注意事项详解
2017/08/01 jQuery
JavaScript设计模式之装饰者模式实例详解
2019/01/17 Javascript
JavaScript实现的九种排序算法
2019/03/04 Javascript
JavaScript函数定义方法实例详解
2019/03/05 Javascript
HTML+JavaScript实现扫雷小游戏
2019/09/30 Javascript
用vue写一个日历
2020/11/02 Javascript
在实例中重学JavaScript事件循环
2020/12/03 Javascript
Python中文件遍历的两种方法
2014/06/16 Python
Python中的pass语句使用方法讲解
2015/05/14 Python
pycharm设置注释颜色的方法
2018/05/23 Python
Django之模型层多表操作的实现
2019/01/08 Python
python 画二维、三维点之间的线段实现方法
2019/07/07 Python
Flask-WTF表单的使用方法
2019/07/12 Python
Python3爬虫中Splash的知识总结
2020/07/10 Python
CSS3实现闪烁动画效果的方法
2015/02/09 HTML / CSS
家长给幼儿园的表扬信
2014/01/09 职场文书
英语感恩演讲稿
2014/01/14 职场文书
新书吧创业计划书
2014/01/31 职场文书
有多年工作经验的自我评价
2014/03/02 职场文书
企业年会主持词
2014/03/27 职场文书
个人委托书如何写
2014/09/25 职场文书
财务人员岗位职责
2015/02/03 职场文书
早会开场白台词大全
2015/06/01 职场文书
怎样写工作总结啊!
2019/06/18 职场文书
react 路由Link配置详解
2021/11/11 Javascript