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源码解读之extend()与工具方法、实例方法详解
Mar 30 jQuery
jquery点赞功能实现代码 点个赞吧!
May 29 jQuery
深入研究jQuery图片懒加载 lazyload.js使用方法
Aug 16 jQuery
jQuery实现鼠标滑过商品小图片上显示对应大图片功能【测试可用】
Apr 27 jQuery
vue+jquery+lodash实现滑动时顶部悬浮固定效果
Apr 28 jQuery
jquery获取img的src值实例介绍
Jan 16 jQuery
JQuery判断radio单选框是否选中并获取值的方法
Jan 17 jQuery
jQuery无冲突模式详解
Jan 17 jQuery
详解JavaScript原生封装ajax请求和Jquery中的ajax请求
Feb 14 jQuery
JQueryDOM之样式操作
Mar 27 jQuery
jquery 时间戳转日期过程详解
Oct 12 jQuery
jQuery实现简单评论区功能
Oct 26 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使用json_encode函数时不转义中文的解决方法
2014/11/12 PHP
PHP生成树的方法
2015/07/28 PHP
PHP自定义多进制的方法
2016/11/03 PHP
php实现根据身份证获取精准年龄
2020/02/26 PHP
js鼠标悬浮出现遮罩层的方法
2015/01/28 Javascript
简介JavaScript中的sub()方法的使用
2015/06/08 Javascript
使用postMesssage()实现跨域iframe页面间的信息传递方法
2016/03/29 Javascript
jQuery点击输入框显示验证码图片
2016/05/19 Javascript
jQuery动态加载css文件实现方法
2016/06/15 Javascript
JS获取鼠标选中的文字
2016/08/10 Javascript
onmouseover事件和onmouseout事件全面理解
2016/08/15 Javascript
vue 2.0封装model组件的方法
2017/08/03 Javascript
浅谈Angular4实现热加载开发旅程
2017/09/08 Javascript
layui中layer前端组件实现图片显示功能的方法分析
2017/10/13 Javascript
nodejs实现的连接MySQL数据库功能示例
2018/01/25 NodeJs
webpack4与babel配合使es6代码可运行于低版本浏览器的方法
2018/10/12 Javascript
jQuery分组选择器简单用法示例
2019/04/04 jQuery
使用VUE实现在table中文字信息超过5个隐藏鼠标移到时弹窗显示全部
2019/09/16 Javascript
[50:12]EG vs Fnatic 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
[01:14]DOTA2 7.22版本新增神杖效果展示(智力英雄篇)
2019/05/29 DOTA
详解Python3中字符串中的数字提取方法
2017/01/14 Python
Python自定义函数实现求两个数最大公约数、最小公倍数示例
2018/05/21 Python
对python中的float除法和整除法的实例详解
2019/07/20 Python
pandas-resample按时间聚合实例
2019/12/27 Python
python实现低通滤波器代码
2020/02/26 Python
python获取linux系统信息的三种方法
2020/10/14 Python
PyCharm Ctrl+Shift+F 失灵的简单有效解决操作
2021/01/15 Python
Python抖音快手代码舞(字符舞)的实现方法
2021/02/07 Python
HTML5 层的叠加的实现
2020/07/07 HTML / CSS
高中历史教学反思
2014/02/08 职场文书
大学班级文化建设方案
2014/05/06 职场文书
铣工实训报告
2014/11/05 职场文书
大学生英文求职信范文
2015/03/19 职场文书
瞿秋白纪念馆观后感
2015/06/10 职场文书
Mysql数据库命令大全
2021/05/26 MySQL
Windows7下FTP搭建图文教程
2022/08/05 Servers