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 EasyUI tree增加搜索功能的实现方法
Apr 27 jQuery
jQuery使用ajax_动力节点Java学院整理
Jul 05 jQuery
jQuery实现的事件绑定功能基本示例
Oct 11 jQuery
Jquery和CSS实现选择框重置按钮功能
Nov 08 jQuery
jquery拖拽自动排序插件使用方法详解
Jul 20 jQuery
jQuery-ui插件sortable实现自由拖动排序
Dec 01 jQuery
jQuery内容过滤选择器与子元素过滤选择器用法实例分析
Feb 20 jQuery
jQuery动态生成的元素绑定事件操作实例分析
May 04 jQuery
使用jQuery实现掷骰子游戏
Oct 24 jQuery
JQuery发送ajax请求时中文乱码问题解决
Nov 14 jQuery
jQuery+ajax实现用户登录验证
Sep 13 jQuery
jQuery实现全选按钮
Jan 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
在Win7 中为php扩展配置Xcache
2014/10/08 PHP
PHP的关于变量和日期处理的一些面试题目整理
2015/08/10 PHP
Yii核心验证器api详解
2016/11/23 PHP
用Javascript 和 CSS 实现脚注(Footnote)效果
2009/09/09 Javascript
关于Javascript作用域链的八点总结
2013/12/06 Javascript
DOM基础教程之使用DOM控制表单
2015/01/20 Javascript
jQuery往textarea中光标所在位置插入文本的方法
2015/06/26 Javascript
javascript设计简单的秒表计时器
2020/09/05 Javascript
jQuery基于扩展实现的倒计时效果
2016/05/14 Javascript
详解Angular的内置过滤器和自定义过滤器【推荐】
2016/12/26 Javascript
JS百度地图搜索悬浮窗功能
2017/01/12 Javascript
jQuery实现的省市联动菜单功能示例【测试可用】
2017/01/13 Javascript
关于AngularJs数据的本地存储详解
2017/01/20 Javascript
javascript history对象详解
2017/02/09 Javascript
一道面试题引发的对javascript类型转换的思考
2017/03/06 Javascript
JavaScript面向对象精要(上部)
2017/09/12 Javascript
JS实现判断有效的数独算法示例
2019/02/25 Javascript
微信小程序中使用Async-await方法异步请求变为同步请求方法
2019/03/28 Javascript
详解基于Vue/React项目的移动端适配方案
2019/08/23 Javascript
[05:59]2018DOTA2国际邀请赛寻真——只为胜利的Secret
2018/08/13 DOTA
Python编程中运用闭包时所需要注意的一些地方
2015/05/02 Python
剖析Django中模版标签的解析与参数传递
2015/07/21 Python
浅谈Python数据类型之间的转换
2016/06/08 Python
Python入门_条件控制(详解)
2017/05/16 Python
Python OpenCV处理图像之滤镜和图像运算
2018/07/10 Python
Python3 jupyter notebook 服务器搭建过程
2018/11/30 Python
Django Admin后台添加数据库视图过程解析
2020/04/01 Python
解决pyqt5异常退出无提示信息的问题
2020/04/08 Python
iKRIX意大利网上商店:男女豪华服装和配件
2019/10/09 全球购物
Nixon手表英国官网:美国尼克松手表品牌
2020/02/10 全球购物
应届优秀本科大学毕业生自我鉴定
2014/01/21 职场文书
联谊活动策划书
2014/01/26 职场文书
信息技术毕业生自荐信范文
2014/03/13 职场文书
2014学习优秀共产党员先进事迹思想汇报
2014/09/14 职场文书
如何在Mac上通过docker配置PHP开发环境
2021/05/29 PHP
教你用Python matplotlib库制作简单的动画
2021/06/11 Python