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实现的动态文字变化输出效果示例【附演示与demo源码下载】
Mar 24 jQuery
jquery图片放大镜效果
Jun 23 jQuery
JQuery EasyUI 结合ztrIee的后台页面开发实例
Sep 01 jQuery
jQuery EasyUI Layout实现tabs标签的实例
Sep 26 jQuery
轻松搞定jQuery+JSONP跨域请求的解决方案
Mar 06 jQuery
jquery.onoff实现简单的开关按钮功能(推荐)
May 24 jQuery
JS拖动选择table里的单元格完整实例【基于jQuery】
May 28 jQuery
非常实用的jQuery代码段集锦【检测浏览器、滚动、复制、淡入淡出等】
Aug 08 jQuery
jquery实现图片无缝滚动 蒙版遮蔽效果
Jan 11 jQuery
jQuery实现移动端下拉展现新的内容回弹动画
Jun 24 jQuery
jquery实现异步文件上传ajaxfileupload.js
Oct 23 jQuery
jQuery ajax - getScript() 方法和getJSON方法
May 14 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作的文本留言本的例子(六)
2006/10/09 PHP
定制404错误页面,并发信给管理员的程序
2006/10/09 PHP
php adodb连接不同数据库
2009/03/19 PHP
深入探讨:PHP使用数据库永久连接方式操作MySQL的是与非
2013/06/05 PHP
WordPress自定义时间显示格式
2015/03/27 PHP
php计算两个坐标(经度,纬度)之间距离的方法
2015/04/17 PHP
任意位置显示html菜单
2007/02/01 Javascript
自己的js工具 Cookie 封装
2009/08/21 Javascript
在chrome浏览器中,防止input[text]和textarea在聚焦时出现黄色边框的解决方法
2011/05/24 Javascript
js 程序执行与顺序实现详解
2013/05/13 Javascript
jQuery的选择器中的通配符使用介绍
2014/03/20 Javascript
tuzhu_req.js 实现仿百度图片首页效果
2015/08/11 Javascript
jquery分隔Url的param方法(推荐)
2016/05/25 Javascript
jquery+ajax实现直接提交表单实例分析
2016/06/17 Javascript
jQuery中Nicescroll滚动条插件的用法
2016/11/10 Javascript
使用Javascript判断浏览器终端设备(PC、IOS(iphone)、Android)
2017/01/04 Javascript
javascript验证香港身份证的格式或真实性
2017/02/07 Javascript
JavaScript的for循环中嵌套一个点击事件的问题解决
2017/03/03 Javascript
深究AngularJS——ng-checked(回写:带真实案例代码)
2017/06/13 Javascript
Vue filter介绍及详细使用
2018/04/04 Javascript
Vue中使用vux配置代码详解
2018/09/16 Javascript
vue给组件传递不同的值方法
2018/09/29 Javascript
JQuery Ajax执行跨域请求数据的解决方案
2018/12/10 jQuery
js/jquery遍历对象和数组的方法分析【forEach,map与each方法】
2019/02/27 jQuery
layui-table获得当前行的上/下一行数据的例子
2019/09/24 Javascript
js实现html滑动图片拼图验证
2020/06/24 Javascript
简述Python2与Python3的不同点
2018/01/21 Python
python 阶乘累加和的实例
2019/02/01 Python
Numpy的简单用法小结
2019/08/28 Python
Python实现猜年龄游戏代码实例
2020/03/25 Python
python+requests接口自动化框架的实现
2020/08/31 Python
python中scipy.stats产生随机数实例讲解
2021/02/19 Python
尤妮佳moony海外旗舰店:日本殿堂级纸尿裤品牌
2018/02/23 全球购物
大学生职业规划前言模板
2013/12/27 职场文书
工程资料员岗位职责
2014/03/10 职场文书
创文明城市标语
2014/06/16 职场文书