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的选中方法(实例讲解)
Jun 27 jQuery
jQuery Ajax 实现分页 kkpager插件实例代码
Aug 10 jQuery
jquery ztree实现右键收藏功能
Nov 20 jQuery
jQuery zTree搜索-关键字查询 递归无限层功能实现代码
Jan 25 jQuery
jQuery仿移动端支付宝键盘的实现代码
Aug 15 jQuery
jQuery pjax 应用简单示例
Sep 20 jQuery
jQuery实现的简单歌词滚动功能示例
Jan 07 jQuery
jquery实现动态改变css样式的方法分析
May 27 jQuery
基于jquery实现的tab选项卡功能示例【附源码下载】
Jun 10 jQuery
jQuery实现简单飞机大战
Jul 05 jQuery
JQuery Ajax如何实现注册检测用户名
Sep 25 jQuery
IDEA配置jQuery, $符号不再显示黄色波浪线的问题
Oct 09 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设计模式 Builder(建造者模式)
2011/06/26 PHP
浅析php工厂模式
2014/11/25 PHP
php结合安卓客户端实现查询交互实例
2015/05/05 PHP
微信获取用户地理位置信息的原理与步骤
2015/11/12 PHP
PHP分页初探 一个最简单的PHP分页代码的简单实现
2016/06/21 PHP
Zend Framework前端控制器用法示例
2016/12/11 PHP
通过修改Laravel Auth使用salt和password进行认证用户详解
2017/08/17 PHP
javascript 多种搜索引擎集成的页面实现代码
2010/01/02 Javascript
jquery 新浪网易的评论块制作
2010/07/01 Javascript
浅谈javascript中的作用域
2012/04/07 Javascript
JS Replace()的高级使用方法介绍
2013/06/29 Javascript
js实现选中页面文字将其分享到新浪微博
2015/11/05 Javascript
JS实现淡入淡出图片效果的方法分析
2016/12/20 Javascript
使用Promise链式调用解决多个异步回调的问题
2017/01/15 Javascript
Angular 4依赖注入学习教程之ClassProvider的使用(三)
2017/06/04 Javascript
Angular4学习教程之DOM属性绑定详解
2018/01/04 Javascript
react高阶组件添加和删除props
2019/04/26 Javascript
layui按条件隐藏表格列的实例
2019/09/19 Javascript
详细解析Python中__init__()方法的高级应用
2015/05/11 Python
利用python批量检查网站的可用性
2016/09/09 Python
Python3使用正则表达式爬取内涵段子示例
2018/04/22 Python
Python做智能家居温湿度报警系统
2018/09/25 Python
Python学习笔记之集合的概念和简单使用示例
2019/08/22 Python
Python使用Pyqt5实现简易浏览器(最新版本测试过)
2020/04/27 Python
MATLAB数学建模之画图汇总
2020/07/16 Python
css3实现超立体3D图片侧翻倾斜效果
2014/04/16 HTML / CSS
应届毕业生就业自荐信
2013/10/26 职场文书
决定成败的关键——创业计划书
2014/01/24 职场文书
体育专业大学生职业生涯规划范文:打造自己的运动帝国
2014/09/12 职场文书
财务工作犯错检讨书
2014/10/07 职场文书
学校运动会通讯稿
2015/07/18 职场文书
2015年城乡环境综合治理工作总结
2015/07/24 职场文书
2015年中秋节主持词
2015/07/30 职场文书
部门主管竞聘书
2015/09/15 职场文书
诉讼和解协议书
2016/03/23 职场文书
javascript实现计算器功能详解流程
2021/11/01 Javascript