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实现分页功能(含ajax请求、后台数据、附完整demo)
Apr 03 jQuery
jQuery.ajax向后台传递数组问题的解决方法
May 12 jQuery
利用jquery去掉时光轴头尾部线条的方法实例
Jun 16 jQuery
jQuery实现的文字逐行向上间歇滚动效果示例
Sep 06 jQuery
判断jQuery是否加载完成,没完成继续判断的解决方法
Dec 06 jQuery
通过jquery.cookie.js实现记住用户名、密码登录功能
Jun 20 jQuery
jQuery实现模拟搜索引擎的智能提示功能简单示例
Jan 27 jQuery
JQueryDOM之样式操作
Mar 27 jQuery
jQuery Migrate 插件用法实例详解
May 22 jQuery
jQuery实现弹幕特效
Nov 29 jQuery
jQuery实现简单评论区功能
Oct 26 jQuery
Jquery Fade用法详解
Nov 06 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学习 函数 课件
2008/06/15 PHP
PHP chmod 函数与批量修改文件目录权限
2010/05/10 PHP
在MongoDB中模拟Auto Increment的php代码
2011/03/06 PHP
laravel实现分页样式替换示例代码(增加首、尾页)
2017/09/22 PHP
JS控制表格隔行变色
2006/06/26 Javascript
Prototype使用指南之string.js
2007/01/10 Javascript
alixixi runcode.asp的代码不错的应用
2007/08/08 Javascript
jQuery MD5加密实现代码
2010/03/15 Javascript
javascript模拟评分控件实现方法
2015/05/13 Javascript
基于vue.js实现图片轮播效果
2016/12/01 Javascript
jquery dataTable 后台加载数据并分页实例代码
2017/06/07 jQuery
详解webpack+angular2开发环境搭建
2017/06/28 Javascript
分享vue里swiper的一些坑
2018/08/30 Javascript
Javascript读取上传文件内容/类型/字节数
2019/04/30 Javascript
微信小程序实用代码段(收藏版)
2019/12/17 Javascript
[01:14:31]Secret vs VG 2018国际邀请赛淘汰赛BO3 第一场 8.23
2018/08/24 DOTA
Python version 2.7 required, which was not found in the registry
2014/08/26 Python
Python使用bs4获取58同城城市分类的方法
2015/07/08 Python
python用Pygal如何生成漂亮的SVG图像详解
2017/02/10 Python
Python对列表中的各项进行关联详解
2017/08/15 Python
Python协程的用法和例子详解
2017/09/09 Python
Python简单计算给定某一年的某一天是星期几示例
2018/06/27 Python
对python修改xml文件的节点值方法详解
2018/12/24 Python
Python3.5内置模块之shelve模块、xml模块、configparser模块、hashlib、hmac模块用法分析
2019/04/27 Python
Python封装成可带参数的EXE安装包实例
2019/08/24 Python
基于python3抓取pinpoint应用信息入库
2020/01/08 Python
解决Python3.8运行tornado项目报NotImplementedError错误
2020/09/02 Python
Melijoe时尚童装德国官网:Melijoe德国
2016/09/03 全球购物
Ellos瑞典官网:北欧地区时尚、美容和住宅领域领先的电子商务网站
2019/11/21 全球购物
关于建议书的格式范文
2014/05/20 职场文书
实习生矿工检讨书
2014/10/13 职场文书
2015年车间安全管理工作总结
2015/05/13 职场文书
拉贝日记观后感
2015/06/05 职场文书
企业宣传语大全
2015/07/13 职场文书
干货!开幕词的写作方法
2019/04/02 职场文书
《月歌。》宣布制作10周年纪念剧场版《RABBITS KINGDOM THE MOVIE》
2022/04/02 日漫