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点赞功能实现代码 点个赞吧!
May 29 jQuery
jquery dataTable 后台加载数据并分页实例代码
Jun 07 jQuery
jQuery Validate表单验证插件实现代码
Jun 08 jQuery
jQuery选择器_动力节点Java学院整理
Jul 05 jQuery
jQuery实现打开网页自动弹出遮罩层或点击弹出遮罩层功能示例
Oct 19 jQuery
原生JS forEach()和map()遍历的区别、兼容写法及jQuery $.each、$.map遍历操作
Feb 27 jQuery
JQueryDOM之样式操作
Mar 27 jQuery
jquery 验证用户名是否重复代码实例
May 14 jQuery
JQuery+Bootstrap 自定义全屏Loading插件的示例demo
Jul 03 jQuery
Jquery Datatables的使用详解
Jan 30 jQuery
JQuery+drag.js上传图片并且实现图片拖曳
Nov 18 jQuery
jquery实现广告上下滚动效果
Mar 04 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无敌近乎加密方式!
2010/07/17 PHP
检测png图片是否完整的php代码
2010/09/06 PHP
destoon安装出现Internal Server Error的解决方法
2014/06/21 PHP
PHP中的替代语法简介
2014/08/22 PHP
详谈PHP文件目录基础操作
2014/11/11 PHP
php实现微信扫码自动登陆与注册功能
2016/09/22 PHP
PHP中STDCLASS用法实例分析
2016/11/11 PHP
PHP编写daemon process 实例详解
2016/11/13 PHP
jQuery库与其他JS库冲突的解决办法
2010/02/07 Javascript
学习javascript文件加载优化
2016/02/19 Javascript
nodeJS实现简单网页爬虫功能的实例(分享)
2017/06/08 NodeJs
ReactNative之键盘Keyboard的弹出与消失示例
2017/07/11 Javascript
js实现网页的两个input标签内的数值加减(示例代码)
2017/08/15 Javascript
js保留两位小数方法总结
2018/01/31 Javascript
又拍云 Node.js 实现文件上传、删除功能
2018/10/28 Javascript
vuecli项目构建SSR服务端渲染的实现
2020/10/30 Javascript
vant中的toast轻提示实现代码
2020/11/04 Javascript
Vue+Spring Boot简单用户登录(附Demo)
2020/11/12 Javascript
[52:22]EG vs VG Supermajor小组赛B组 BO3 第一场 6.2
2018/06/03 DOTA
Python备份Mysql脚本
2008/08/11 Python
python入门教程之识别验证码
2017/03/04 Python
Python读取MRI并显示为灰度图像实例代码
2018/01/03 Python
Python使用win32 COM实现Excel的写入与保存功能示例
2018/05/03 Python
Python基于多线程实现抓取数据存入数据库的方法
2018/06/22 Python
详解通过API管理或定制开发ECS实例
2018/09/30 Python
一行python实现树形结构的方法
2019/08/09 Python
python从内存地址上加载python对象过程详解
2020/01/08 Python
快速解决jupyter启动卡死的问题
2020/04/10 Python
python在地图上画比例的实例详解
2020/11/13 Python
什么叫应用程序域?什么是托管代码?什么是强类型系统?什么是装箱和拆箱?什么是重载?CTS、CLS和CLR分别作何解释?
2012/05/23 面试题
什么是动态端口(Dynamic Ports)?动态端口的范围是多少?
2014/12/12 面试题
护士在校生自荐信
2014/02/01 职场文书
祝酒词范文
2015/08/12 职场文书
简历自我评价:教师师德表现自我评价
2019/04/24 职场文书
golang http使用踩过的坑与填坑指南
2021/04/27 Golang
Java 泛型详解(超详细的java泛型方法解析)
2021/07/02 Java/Android