起初会想到使用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. SPI(Service Provider Interface)机制

    JAVA SPI 约定如下:当服务的提供者提供了服务接口的一种实现之后,在jar包的META-INF/services/ 目录中同时创建一个以服务接口命名的文件,该文件中的内容就是实现该服务接口的具体 ...

  2. 每天一个linux命令（目录）

    转:http://www.cnblogs.com/peida/archive/2012/12/05/2803591.html 开始详细系统的学习linux常用命令,坚持每天一个命令,所以这个系列为每天 ...

  3. 记一次pm2的踩坑

    1.问题: 公司采用了自动发布平台,最近突然发现一个问题,上线完成后服务是能正常访问的,但是有一个节点访问的时候每两次中总是有一次404,通过nginx的access日志分析发现第一次正常访问有一次g ...

  4. 阿里巴巴FastJSON使用实例

      1. 什么是fastjson? fastjson是阿里巴巴的开源JSON解析库,它可以解析JSON格式的字符串,支持将Java Bean序列化为JSON字符串,也可以从JSON字符串反序列化到Ja ...

  5. winform窗体 控件【公共控件】

    Button   按钮 布局 AutoSize    自动匹配尺寸 Location     确定控件位置,相对左上角坐标 Margin       控件与控件之间的距离 Size           ...

  6. Java基础——GUI编程（二）

    一.事件监听机制 -- 事件源:awt 或swing包中的那些图形界面组件,即发生事件的组件 -- 事件:Event  用户对组件的一个操作 -- 监听器:Listener  负责处理事件的方法 二. ...

  7. Windows系统的消息机制

    1)Add the window to the clipboard viewer chain. 通过SetClipboardViewer()传入窗口句柄,所有监视剪贴板的窗口句柄会组成一个链表(后来者 ...

  8. Mysql数据库 的库表简易操作

    一. 库的操作 1.创建数据库 创建数据库: create database 库名 charset utf8;   charset uft8  可选项 1.2 数据库命名规范: 可以由字母.数字.下划 ...

  9. layui 三级菜单

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

  10. json 平面转树状 child [zhuan]

    <script> /** * json格式转树状结构 * @param {json} json数据 * @param {String} id的字符串 * @param {String} 父 ...