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实现多选下拉列表
Aug 02 jQuery
jQuery基于cookie实现换肤功能实例
Oct 14 jQuery
javascript+jQuery实现360开机时间显示效果
Nov 03 jQuery
jQuery简单实现向列表动态添加新元素的方法示例
Dec 25 jQuery
jQuery实现的监听导航滚动置顶状态功能示例
Jul 23 jQuery
jquery实现联想词搜索框和搜索结果分页的示例
Oct 10 jQuery
jQuery事件blur()方法的使用实例讲解
Mar 30 jQuery
jquery实现动态改变css样式的方法分析
May 27 jQuery
jquery UI实现autocomplete在获取焦点时得到显示列表功能示例
Jun 04 jQuery
jQuery操作选中select下拉框的值代码实例
Feb 07 jQuery
jQuery实现动态加载瀑布流
Sep 01 jQuery
Jquery+javascript实现支付网页数字键盘
Dec 21 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
日本因肺炎疫情影响,这几部动漫推延播放!
2020/03/03 日漫
php 连接mssql数据库 初学php笔记
2010/03/01 PHP
解析关于wamp启动是80端口被占用的问题
2013/06/21 PHP
PHP模板引擎Smarty的缓存使用总结
2014/04/24 PHP
Docker 如何布置PHP开发环境
2016/06/21 PHP
PHP实现小程序批量通知推送
2018/11/27 PHP
YII2框架中使用RBAC对模块,控制器,方法的权限控制及规则的使用示例
2020/03/18 PHP
用JSON做数据传输格式中的一些问题总结
2011/12/21 Javascript
JQuery之focus函数使用介绍
2013/08/20 Javascript
js简单的表格添加行和删除行操作示例
2014/03/31 Javascript
setTimeout()递归调用不加引号出错的解决方法
2014/09/05 Javascript
JavaScript sup方法入门实例(把字符串显示为上标)
2014/10/20 Javascript
JQuery跳出each循环的方法
2015/04/16 Javascript
JS折半插入排序算法实例
2015/12/02 Javascript
AngularJS实现表单手动验证和表单自动验证
2015/12/09 Javascript
基于vue.js实现图片轮播效果
2016/12/01 Javascript
用纯Node.JS弹出Windows系统消息提示框实例(MessageBox)
2017/05/17 Javascript
详解用场景去理解函数柯里化(入门篇)
2019/04/11 Javascript
JavaScript 面向对象基础简单示例
2019/10/02 Javascript
[00:48]DOTA2国际邀请赛公开赛报名开始 扫码开启逐梦之旅
2018/06/06 DOTA
python通过imaplib模块读取gmail里邮件的方法
2015/05/08 Python
python开发之基于thread线程搜索本地文件的方法
2015/11/11 Python
python爬虫爬取淘宝商品信息
2018/02/23 Python
一百行python代码将图片转成字符画
2021/02/19 Python
Python获取命令实时输出-原样彩色输出并返回输出结果的示例
2019/07/11 Python
Python Django2 model 查询介绍(条件、范围、模糊查询)
2020/03/16 Python
使用pymysql查询数据库,把结果保存为列表并获取指定元素下标实例
2020/05/15 Python
Python xlwt模块使用代码实例
2020/06/10 Python
解决pip install psycopg2出错问题
2020/07/09 Python
简单掌握CSS3将文字描边及填充文字颜色的方法
2016/03/07 HTML / CSS
kmart凯马特官网:美国最大的打折零售商和全球最大的批发商之一
2016/11/17 全球购物
英国时尚优质的女装:Hope Fashion
2018/08/14 全球购物
化工专业个人的求职信范文
2013/11/28 职场文书
信息合作协议书
2014/10/09 职场文书
大学生村官驻村工作心得体会
2016/01/23 职场文书
Java实现经典游戏泡泡堂的示例代码
2022/04/04 Java/Android