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

效果图：

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

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>使用JQ实现统计剩余字数</title>

   <script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js"></script>

</head>

<body>

<textarea name="" id="" cols="100" rows="30"></textarea>

<span>你还可以输入<strong style="color:red;">140</strong>个字</span>

<script>

    var maxLength = 140;

    $('textarea').keyup(function(){

        var L = $(this).val().length;

        $('strong').text(maxLength-L);//总字数减去输入的字数

        if(parseInt($('strong').text())<0){

            $('strong').text('0'); //如果输入文字小于0 则文本显示为0

            //alert($(this).val()）;

            var val1 = $(this).val().substr(1,140);//截取输入长度

            //substr（不推荐使用，ECMAScript没有标准化substr()方法）

            $(this).val(val1);

        }

    })

</script>

</body>

</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. Android实战——GreenDao3.2的使用，爱不释手

    1前言 GreenDao是一款操作数据库的神器,经过了2.0版本的升级后,已经被广泛的开发者使用.确实是很好用,入门简单,可以剩去了数据库的建表操作和数据库SQL的编写,博主用了一次之后爱不释手,和以 ...

  2. Progress数据库配置与应用

    创建database 开始->程序->OpenEdge,选择:Desktop,进行database创建. 选择创建一个空database或直接copy一个demo的database,我们选 ...

  3. Android手势密码实现

    图 二.实现思路: 1. 正上方的提示区域,用一个类(LockIndicator.java)来实现,自定义view来绘制9个提示图标: 2. 手势密码绘制区域,用一个类(GestureContentV ...

  4. redis介绍（2）简单安装

    我分两种方式讲解 window 下载地址:https://github.com/MSOpenTech/redis/releases. Redis 支持 32 位和 64 位.这个需要根据你系统平台的实 ...

  5. redis mysql验证 redis_mysql_check.py

    # coding:utf-8 import pymysql import redis import sys def con_mysql(sql): db = pymysql.connect(host= ...

  6. SQL语句还原数据库并移动文件到指定路径

    用SQL语句还原数据库时如果不指定数据库文件的存储路径,则默认把数据文件和日志文件存放到与原数据库相同的文件路径中,这样可能会产生错误,比如执行下面的语句: restore database Smar ...

  7. 辉光UIView的category

    辉光UIView的category 本人视频教程系类   iOS中CALayer的使用 效果如下: 源码: UIView+GlowView.h 与 UIView+GlowView.m // // UI ...

  8. 铁乐学python_day13_迭代器生成器

    一.[可迭代对象Iterable] 粗略判断的话,我们可以说能被for循环进行遍历的对象就是可迭代对象,如str,list,tuple,dict(key),set,range. (open file ...

  9. windows server 2016 无法联网问题

    首先,联网分解为两个问题,一.WLAN(无线网).二.以太网(有线网) 一 .WLAN问题解决方案 1.打开服务器管理器 2.添加角色和功能 3.一直点下一步到“功能”,勾选 DirectPlay 和 ...

  10. ORACLE分区表操作

    ORACLE分区表的操作应用 摘要:在大量业务数据处理的项目中,可以考虑使用分区表来提高应用系统的性能并方便数据管理,本文详细介绍了分区表的使用. 在大型的企业应用或企业级的数据库应用中,要处理的数据 ...