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+css实现侧边导航栏效果
Jun 12 jQuery
jQuery动画_动力节点节点Java学院整理
Jul 04 jQuery
jquery.uploadView 实现图片预览上传功能
Aug 10 jQuery
jQuery中ajax获取数据赋值给页面的实例
Dec 31 jQuery
解决Jquery下拉框数据动态获取的问题
Jan 25 jQuery
jQuery实现滚动到底部时自动加载更多的方法示例
Feb 18 jQuery
解决jquery的ajax调取后端数据成功却渲染失败的问题
Aug 08 jQuery
js jquery 获取某一元素到浏览器顶端的距离实现方法
Sep 05 jQuery
在vue项目中使用Jquery-contextmenu插件的步骤讲解
Jan 27 jQuery
Jquery属性的获取/设置及样式添加/删除操作技巧分析
Dec 23 jQuery
jquery传参及获取方式(两种方式)
Feb 13 jQuery
jQuery 动态粒子效果示例代码
Jul 07 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
推荐文章系统(一)
2006/10/09 PHP
PHP 读取文件的正确方法
2009/04/29 PHP
php获取qq用户昵称和在线状态(实例分析)
2013/10/27 PHP
PHP处理SQL脚本文件导入到MySQL的代码实例
2014/03/17 PHP
php删除左端与右端空格的方法
2014/11/29 PHP
WordPress中创建用户角色的相关PHP函数使用详解
2015/12/25 PHP
javascript第一课
2007/02/27 Javascript
杨氏矩阵查找的JS代码
2013/03/21 Javascript
代码获取历史上的今天发生的事
2014/04/11 Javascript
Area 区域实现post提交数据的js写法
2014/04/22 Javascript
node.js中的fs.lstat方法使用说明
2014/12/16 Javascript
jQuery页面刷新(局部、全部)问题分析
2016/01/09 Javascript
js添加绑定事件的方法
2016/05/15 Javascript
jquery轮播的实现方式 附完整实例
2016/07/28 Javascript
Javascript实现异步编程的过程
2018/06/18 Javascript
python用来获得图片exif信息的库实例分析
2015/03/16 Python
Python读取Json字典写入Excel表格的方法
2018/01/03 Python
如何使用django的MTV开发模式返回一个网页
2019/07/22 Python
Python SQLAlchemy入门教程(基本用法)
2019/11/11 Python
Python实现打印实心和空心菱形
2019/11/23 Python
python 实现多维数组转向量
2019/11/30 Python
python爬虫爬取监控教务系统的思路详解
2020/01/08 Python
基于python实现数组格式参数加密计算
2020/04/21 Python
pandas数据选取:df[] df.loc[] df.iloc[] df.ix[] df.at[] df.iat[]
2020/04/24 Python
django使用graphql的实例
2020/09/02 Python
python中count函数知识点浅析
2020/12/17 Python
利用CSS3实现炫酷的飞机起飞动画
2016/09/17 HTML / CSS
js实现移动端H5页面手指滑动刻度尺功能
2017/11/16 HTML / CSS
医学生实习自我鉴定
2013/09/27 职场文书
年级组长自我鉴定
2014/02/22 职场文书
社会实践评语
2014/04/28 职场文书
大型会议策划方案
2014/05/17 职场文书
保护地球的标语
2014/06/17 职场文书
颐和园的导游词
2015/01/30 职场文书
2016读书月活动心得体会
2016/01/14 职场文书
个人售房合同协议书
2016/03/21 职场文书