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中$.fn和图片滚动效果实现的必备知识总结
Apr 21 jQuery
jQuery实现百度登录框的动态切换效果
Apr 21 jQuery
jQuery结合jQuery.cookie.js插件实现换肤功能示例
Oct 14 jQuery
jquery+css3实现熊猫tv导航代码分享
Feb 12 jQuery
jQuery滚动条美化插件nicescroll简单用法示例
Apr 18 jQuery
jQuery实现仿京东防抖动菜单效果示例
Jul 06 jQuery
详解webpack引用jquery(第三方模块)的三种办法
Aug 21 jQuery
jQuery实现轮播图效果
Nov 26 jQuery
JQuery事件委托(适用于给动态生成的脚本元素添加事件)
Feb 01 jQuery
如何使用Jquery动态生成二级选项列表
Feb 06 jQuery
jQuery HTML设置内容和属性操作实例分析
May 20 jQuery
jQuery实现查看图片功能
Dec 01 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 分页类实现代码
2009/12/03 PHP
PHP5权威编程阅读学习笔记 附电子书下载
2012/07/05 PHP
PHP获取某个月最大天数(最后一天)的方法
2015/07/29 PHP
PHP 下载文件时如何自动添加bom头及解释BOM头和去掉bom头的方法
2016/01/04 PHP
php利用array_search与array_column实现二维数组查找
2019/07/08 PHP
jQuery+PHP实现图片上传并提交功能
2020/07/27 PHP
jquery 全局AJAX事件使用代码
2010/11/05 Javascript
JavaScript代码简单实现求杨辉三角给定行的最大值
2013/10/29 Javascript
jquery实现的一个简单进度条效果实例
2014/05/12 Javascript
jQuery on()方法使用技巧详解
2015/04/16 Javascript
jquery实现全选功能效果的实现代码
2016/05/05 Javascript
AngularJS中如何使用echart插件示例详解
2016/10/26 Javascript
JS自定义函数实现时间戳转换成date的方法示例
2017/08/27 Javascript
详解Vue2.0 事件派发与接收
2017/09/05 Javascript
前端html中jQuery实现对文本的搜索功能并把搜索相关内容显示出来
2017/11/14 jQuery
微信小程序网络请求封装示例
2018/07/24 Javascript
Vue 实例事件简单示例
2019/09/19 Javascript
OpenLayers加载缩放控件使用方法详解
2020/09/25 Javascript
带你使用webpack快速构建web项目的方法
2020/11/12 Javascript
详细解读tornado协程(coroutine)原理
2018/01/15 Python
儿童学习python的一些小技巧
2018/05/27 Python
win10系统Anaconda和Pycharm的Tensorflow2.0之CPU和GPU版本安装教程
2019/12/03 Python
基于梯度爆炸的解决方法:clip gradient
2020/02/04 Python
pycharm安装及如何导入numpy
2020/04/03 Python
xadmin使用formfield_for_dbfield函数过滤下拉表单实例
2020/04/07 Python
逼真的HTML5树叶飘落动画
2016/03/01 HTML / CSS
贝玲妃美国官方网站:Benefit美国
2016/08/28 全球购物
英国和世界各地鲜花速递专家:Arena Flowers
2018/02/10 全球购物
Pretty You London官网:英国拖鞋和睡衣品牌
2019/05/08 全球购物
Michael Kors香港官网:美国奢侈品品牌
2019/12/26 全球购物
大学生就业自我鉴定
2013/10/26 职场文书
护理专业学生职业生涯规划范文
2014/03/11 职场文书
热门专业求职信
2014/05/24 职场文书
个人四风问题对照检查材料
2014/10/01 职场文书
2014年会计人员工作总结
2014/12/10 职场文书
python playwrigh框架入门安装使用
2022/07/23 Python