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列表检索功能实现代码
Jul 17 jQuery
简单实现jQuery手风琴效果
Aug 18 jQuery
jquery中done和then的区别(详解)
Dec 19 jQuery
jQuery中ajax获取数据赋值给页面的实例
Dec 31 jQuery
jQuery Dom元素操作技巧
Feb 04 jQuery
jQuery实现鼠标点击处心形漂浮的炫酷效果示例
Apr 12 jQuery
jquery.param()实现数组或对象的序列化方法
Oct 08 jQuery
jQuery实现的点击图片居中放大缩小功能示例
Jan 16 jQuery
jQuery pager.js 插件动态分页功能实例分析
Aug 02 jQuery
jquery实现直播弹幕效果
Nov 28 jQuery
jQuery操作元素的内容和样式完整实例分析
Jan 10 jQuery
使用jquery实现轮播图效果
Jan 02 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
PHP5中MVC结构学习
2006/10/09 PHP
如何给phpcms v9增加类似于phpcms 2008中的关键词表
2013/07/01 PHP
PHP时间处理类操作示例
2018/09/05 PHP
PHP iconv()函数字符编码转换的问题讲解
2019/03/22 PHP
PHP面向对象程序设计__tostring()和__invoke()用法分析
2019/06/12 PHP
CSS中简写属性要注意TRouBLe的顺序问题(避免踩坑)
2021/03/09 HTML / CSS
JavaScript学习笔记之获取当前目录的实现代码
2010/12/14 Javascript
js/jquery获取浏览器窗口可视区域高度和宽度以及滚动条高度实现代码
2012/12/17 Javascript
jquery获取对象的方法足以应付常见的各种类型的对象
2014/05/14 Javascript
AngularJS入门教程(一):静态模板
2014/12/06 Javascript
Node.js开发者必须了解的4个JS要点
2016/02/21 Javascript
jQuery插件pagination实现无刷新分页
2016/05/21 Javascript
jQuery树形插件jquery.simpleTree.js用法分析
2016/09/05 Javascript
vue 怎么创建组件及组件使用方法
2017/07/27 Javascript
JS实现百度搜索接口及链接功能实例代码
2018/02/02 Javascript
Angular4 反向代理Details实践
2018/05/30 Javascript
javascript中toFixed()四舍五入使用方法详解
2018/09/28 Javascript
在Express中提供静态文件的实现方法
2019/10/17 Javascript
p5.js临摹动态图形的方法
2019/10/23 Javascript
记录微信小程序 height: calc(xx - xx);无效问题
2019/12/30 Javascript
Threejs实现滴滴官网首页地球动画功能
2020/07/13 Javascript
Vue切换组件实现返回后不重置数据,保留历史设置操作
2020/07/21 Javascript
详解Python2.x中对Unicode编码的使用
2015/04/03 Python
使用Python实现windows下的抓包与解析
2018/01/15 Python
python TKinter获取文本框内容的方法
2018/10/11 Python
H5仿微信界面教程(一)
2017/07/05 HTML / CSS
html5新特性与用法大全
2018/09/13 HTML / CSS
智能旅行箱:Horizn Studios
2018/04/30 全球购物
机电专业大学生求职信
2013/10/04 职场文书
优秀教师获奖感言
2014/01/31 职场文书
如何写一封打动人心的求职信
2014/02/17 职场文书
祖国在我心中演讲稿300字
2014/05/04 职场文书
在校大学生自我评价范文
2014/09/12 职场文书
暑期实践个人总结
2015/03/06 职场文书
react antd实现动态增减表单
2021/06/03 Javascript
Feign调用全局异常处理解决方案
2021/06/24 Java/Android