JQ实现统计文本框剩余字数

效果图：

代码如下，复制即可使用：

  1. <html lang="en">
  2. <head>
  3.     <meta charset="UTF-8">
  4.     <title>使用JQ实现统计剩余字数</title>
  5.    <script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js"></script>
  6. </head>
  7. <body>
  8. <textarea name="" id="" cols="100" rows="30"></textarea>
  9. <span>你还可以输入<strong style="color:red;">140</strong>个字</span>
  10. <script>
  11.     var maxLength = 140;
  12.     $('textarea').keyup(function(){
  13.         var L = $(this).val().length;
  14.         $('strong').text(maxLength-L);//总字数减去输入的字数
  15.  
  16.         if(parseInt($('strong').text())<0){
  17.             $('strong').text('0'); //如果输入文字小于0 则文本显示为0
  18.             //alert($(this).val()）;
  19.             var val1 = $(this).val().substr(1,140);//截取输入长度
  20.             //substr（不推荐使用，ECMAScript没有标准化substr()方法）
  21.             $(this).val(val1);
  22.         }
  23.     })
  24. </script>
  25. </body>
  26. </html>

如果有更好的方法，可以和我们大家一起分享哦，如有错误，欢迎联系我改正，非常感谢！！！

使用JQ实现统计剩余字数的更多相关文章

  1. textarea还剩余字数统计

    <!DOCTYPE html><html><head> <meta charset="utf-8" /> <title> ...

  2. textarea还剩余字数统计，支持复制粘贴的时候统计字数

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...

  3. js 实现textarea剩余字数统计

    1 针对textarea剩余字数统计 2 <div class="fankui-textarea"> 3 <span>留言:</span> &l ...

  4. JQ限制输入字数，并提示剩余字数

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  5. 如何实现textarea中获取动态剩余字数的实现

    工作中遇到一个案例,之前没有写过,今儿啃了半个下午硬是给写出来,灰常又成就感!当然对于js大牛来说这根本不算啥,但是对于我自己的js能力又向前迈出一小步. 案例介绍:我们常见到有的网站有textare ...

  6. JS实现动态提示文本框可输入剩余字数(类似发表微博数字提示)

    一.实现效果: 为了更直观的体现用户在文本框输入文本时能看到自己输入了多少字,项目中需要通过判断提示文本框剩余可输入字数. html & JS: <div> <textare ...

  7. 文本域textarea显示输入剩余字数

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  8. PHP 中如何正确统计中文字数

    PHP 中如何正确统计中文字数?这个是困扰我很久的问题,PHP 中有很多函数可以计算字符串的长度,比如下面的例子,分别使用了 strlen,mb_strlen,mb_strwidth 这个三个函数去测 ...

  9. Javascript实现真实字符串剩余字数提示

    //文本框剩余字数提示(字符大小) function textLimitCheckSj(thisArea, maxLength, SpanId) { var str = thisArea.value; ...

随机推荐

  1. js原生实现轮播

    前两天同事面试新人,让现场写”轮播的实现”.我一想这玩意貌似我也没写过啊,就在旁边暗搓搓地拖了一张纸也在那写,同事都纳闷了! 这玩意实现方法有很多种,就看喜欢那种,喜欢怎么写而已.我这里是通过对img ...

  2. Vue 框架-04-计算属性

    Vue 框架-04-计算属性 计算属性是什么? 大家可以去看官网解释:计算属性和侦听器 今天的第一个小实例: 为啥先放折磨一个实例,之前数据绑定的就已经可以实现了,看起来那么简单,就是为了告诉大家,当 ...

  3. redis介绍（6）集群（ruby）

    redis集群: redis集群是高可用的一种体现,让整个redis圈更加稳定,不易出现宕机的情况, redis原理: redis3.0之前是不支持集群的,实现集群要自己去配置实现,很麻烦,在3.0之 ...

  4. oracle数据泵备份（Expdp命令）

    Oracle备份方式主要分为数据泵导出备份.热备份与冷备份三种,今天首先来实践一下数据泵备份与还原.数据泵导出/导入属于逻辑备份,热备份与冷备份都属于物理备份.oracle10g开始推出了数据泵(ex ...

  5. Android笔记：解决 Your project contains error(s)，please fix them before running your application问题

    解决 Your project contains error(s),please fix them before running your application问题 貌似好多人都有遇到这问题,而且网 ...

  6. [WINDOWS MOBILE | SOLUTION] 通过有线连接到 PC 后，WM设备能 PING 通网关但是不能上网

    在 Windows Mobile Device Center 处点击 Mobile Device Settings, Connection Settings, 选择 This computer con ...

  7. 基于JVM（内存）和Tomcat性能调优

    一.总结前一天的学习 从“第三天”的性能测试一节中,我们得知了决定性能测试的几个重要指标,它们是: ü   吞吐量 ü   Responsetime ü   Cpuload ü   MemoryUsa ...

  8. JAVA两种代理模式

    简单设计动态代理,基本模拟spring的动态代理方式. before afterReturning around afterException after这些通知方法都可以这块模拟出来 spring的 ...

  9. 关于springMVC的一些xml配置

    ①springMVC必备jar包: commons-logging-1.1.3.jar spring-aop-4.0.0.RELEASE.jar spring-beans-4.0.0.RELEASE. ...

  10. [翻译] UIColor-uiGradientsAdditions

    UIColor-uiGradientsAdditions https://github.com/kaiinui/UIColor-uiGradientsAdditions Beautiful color ...