起初会想到使用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. mysql笔记-索引

    什么是聚簇索引 聚簇索引:索引的叶节点就是数据节点(索引值).而非聚簇索引的叶节点仍然是索引节点(告诉你怎么在表中查找这一记录),只不过有一个指针指向对应的数据块. Innodb和MyIsam区别 转 ...

  2. 自制 Chrome Custom.css 设置网页字体为微软雅黑扩展

    自己做的將網頁自動替換為微軟雅黑的擴展.很好用. 將Customcss.rcx拖到擴展裏就可. 下載:Customcss.zip

  3. Netty 解码器抽象父类 ByteToMessageDecoder 源码解析

    前言 Netty 的解码器有很多种,比如基于长度的,基于分割符的,私有协议的.但是,总体的思路都是一致的. 拆包思路:当数据满足了 解码条件时,将其拆开.放到数组.然后发送到业务 handler 处理 ...

  4. 表格(Table)隔行变色

    在ASP.NET的Repeater控件,实现隔行变色,是极简单的事情.因为它有ListItemType.Item和ListItemType.AlternatingItem模版.如果在普通的表格(Tab ...

  5. 乐字节-Java8新特性-接口默认方法

    总概 JAVA8 已经发布很久,而且毫无疑问,java8是自java5(2004年发布)之后的最重要的版本.其中包括语言.编译器.库.工具和JVM等诸多方面的新特性. Java8 新特性列表如下: 接 ...

  6. Mysql密码忘记了怎么办？

    停止mysql: sudo /etc/init.d/MySQL stop(可能有其它的方法,总之停止MySQLd的运行就可以了) 修改mysql的配置文件: 在/etc/mysql/mysql.con ...

  7. git使用基本教程

    黑马的视频,以前看过廖雪峰的git,总是学不懂,这次终于看会了,结合视频更佳,红色字是重点. 基于linux下面git百度云视频教程:http://pan.baidu.com/s/1bpk472B 密 ...

  8. es7新增的2个特性

  9. HTML自定义标签与标签自定义属性

    大部分浏览器支持自定义HTML标签和为标准标签自定义属性,而且很多浏览器对这两种自定义行为的支持都很直接了当. 自定义HTML标签 在firefox.chrome这种现代浏览器里,自定义标签很简单,就 ...

  10. mysql常用语句练习-基于ecshop2.7.3数据库(1)

    SELECT * FROM ecs_goods WHERE goods_id = 1;SELECT goods_id, goods_name FROM ecs_goods WHERE goods_id ...