起初会想到使用keyup、keydown、keypress或者是onchange事件，onchange需要失去焦点才触发， 其它三个有些对按住键盘某个键不放不生效，有些对使用中文输入法正在输入时统计不正确。

网上找到一种方法就是绑定事件input propertychange

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

</head>

<body>

    <textarea></textarea>

    <div >当前已输入<span id="count">0</span>个字符</div>

    <script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

    <script type="text/javascript">

        $('textarea').bind('input propertychange',function(){

            $('#count').html($(this).val().length);

        });

    </script>

</body>

</html>

效果如下：

jquery实现显示textarea输入字符数的更多相关文章

  1. 【转】android 中如何限制 EditText 最大输入字符数

    原文网址:http://blog.csdn.net/fulinwsuafcie/article/details/7437768 方法一: 在 xml 文件中设置文本编辑框属性作字符数限制 如:andr ...

  2. android 中如何限制 EditText 最大输入字符数

    方法一: 在 xml 文件中设置文本编辑框属性作字符数限制 如:android:maxLength="10" 即限制最大输入字符个数为10 方法二: 在代码中使用InputFilt ...

  3. SecureCRT 如何改变对话框--每行输入字符数的多少

    通过设置Logical columns的大小,选中Retain size an font来改变每行输入字符数的多少 1.设置Session Options–>Terminal–>Emula ...

  4. textarea输入框实时统计输入字符数

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

  5. textarea限制字符数

    html代码: <div class="remark_edit J_Remark_Edit"> <div class="tip-body"&g ...

  6. jQuery 写的textarea输入字数限制

    //先判断浏览器是不是万恶的IE        var bind_name = 'input';//默认事件        if (navigator.userAgent.indexOf(" ...

  7. 限制input输入字符数（中文2个字符，英文1个字符）

    input的maxlength可以限制input的输入的字符数,但是是字符串的长度,相当于判断str.length;然而经常会有中文字符算2个字符英文算1个字符的需求,目前只能通过编写代码来实现. & ...

  8. jquery textarea输入字符字数提示

    效果: html代码: <textarea id="assayInfo" name="assayInfo" rows="3" cols ...

  9. js控制textarea输入字符串的个数，鼠标按下抬起推断输入字符数

    [Html代码] <table> <tr> <td width="150">短信内容:</td> <td> <te ...

随机推荐

  1. 21-hadoop-weibo推送广告

    1, tf-idf 计算每个人的词条中的重要度 需要3个mapreduce 的 job执行, 第一个计算 TF 和 n, 第二个计算 DF, 第三个代入公式计算结果值 1, 第一个job packag ...

  2. 线性查找算法(BFPRT)

    BFPRT算法的作者是5位真正的大牛(Blum . Floyd . Pratt . Rivest . Tarjan). BFPRT解决的问题十分经典,即从某n个元素的序列中选出第k大(第k小)的元素, ...

  3. Supervisod的使用

    原文链接:http://blog.csdn.net/xyang81/article/details/51555473 Supervisor(http://supervisord.org/)是用Pyth ...

  4. 行为型设计模式之模板方法(TEMPLATE METHOD)模式 ，策略（Strategy ）模式

    1 模板方法(TEMPLATE METHOD)模式: 模板方法模式把我们不知道具体实现的步聚封装成抽象方法,提供一些按正确顺序调用它们的具体方法(这些具体方法统称为模板方法),这样构成一个抽象基类.子 ...

  5. 让浏览器兼容ES6语法(gulp+babel)

    使用gulp+babel搭建ES6环境 前言 我们查阅资料可以知道ECMAScript 2015(简称ES6)已经于2015年发布,由于用户使用的浏览器版本在安装的时候可能早于ES6的发布,而到了今天 ...

  6. 【C#设计模式-抽象工厂模式】

    一.抽象工厂模式的定义: 为创建一组相关或相互依赖的对象提供一个接口,而且无需指定他们的具体类. 二.抽象工厂模式的结构: 抽象工厂模式是所有形态的工厂模式中最为抽象和最具一般性的一种形态.抽象工厂模 ...

  7. [Redis]Redis的数据类型

    存储String字符串,使用get,set命令,一个键最大存储512M 存储Hash哈希,使用HMSET和HGETALL命令,参数:键,值 例如:HMSET user:1 username taosh ...

  8. Linux-mkdosfs格式化磁盘命令(15)

    名称:mkdosfs 使用:mkdosfs [块设备名称] 说明: 将一个块设备格式化为DOS磁盘类型 例: mkdosfs /dev/memblock //将memblock块设备格式化为dos磁盘 ...

  9. JVM 内存初学 (堆(heap)、栈(stack)和方法区(method) )（转载）

    想想面试的时候很多会问jvm这方面的问题虽然还是菜鸟不太能用到现在但是还是了解一下, 找资料的时候看见个大佬写的很好转载到这方便以后自己复习和给大佬做宣传 以下为大佬的博客原文: 这两天看了一下深入浅 ...

  10. MySQL锁详解！(转载)

    博客来源于https://baijiahao.baidu.com/s?id=1610581108528334819&wfr=spider&for=pc 一.概述 数据库锁定机制简单来说 ...