起初会想到使用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. JavaScript创建对象的方法汇总

    JavaScript中的对象 ECMA-262把对象定义为:“无序属性的集合,其属性可以包含基本值.对象或者函数.”严格来讲,这就相当于说对象是一组没有特性顺序的值.对象的每一个属性或方法都有一个名字 ...

  2. curl常用命令【转】

    原文地址: http://www.thegeekstuff.com/2012/04/curl-examples/ 下载单个文件,默认将输出打印到标准输出中(STDOUT)中 curl http://w ...

  3. SpringCloud入门之Maven系统安装及配置

    一.Maven 介绍 这个单词中文翻译为“专家”或“内行”.下面将向你介绍 Maven这一跨平台的项目管理工具.作为 Apache 组织中的一个成功的开源项目,Maven 主要服务于基 Java 平台 ...

  4. LNP环境下Nginx与PHP配合解析的原理

    正在理解中,查阅资料,加上自我理解,得出如下结论,如有错误,欢迎指正.... LNP环境,Nginx与PHP配合运行的原理解释: 以前的互联网时代我们成为web1.0时代,那时用户是被动接受网络信息, ...

  5. Spring AOP介绍及源码分析

    转自:http://www.uml.org.cn/j2ee/201301102.asp 软件开发经历了从汇编语言到高级语言和从过程化编程到面向对象编程:前者是为了提高开发效率,而后者则使用了归纳法,把 ...

  6. mysql索引总结(1)-mysql 索引类型以及创建

    mysql索引总结(1)-mysql 索引类型以及创建 mysql索引总结(2)-MySQL聚簇索引和非聚簇索引 mysql索引总结(3)-MySQL聚簇索引和非聚簇索引 mysql索引总结(4)-M ...

  7. nginx的一次跨域处理

    1.事故 访问图片资源的时候,发生了跨域,具体报错如下所示: 403 Response to preflight request doesn't pass access control check: ...

  8. elasticSearch6源码分析(8)RepositoriesModule模块

    1.RepositoriesModule概述 Sets up classes for Snapshot/Restore 1.1 snapshot概述 A snapshot is a backup ta ...

  9. U盘安装原版Win7或Win8教程

    具体步骤: 1.先使用大白菜U盘启动制作工具制作完U盘启动(参照制作教程). 2.找到Windows7系统的iso镜像,用UltraISO或者WinRAR打开Win7的iso镜像,然后提取/解压所有文 ...

  10. Spring读取配置文件 @Value

    最近在学习Spring如何读取配置文件,记录下方便自己也方便别人: 大致分为两类吧,一种的思路是利用Spring的beanFactoryPostProcessor读取配置文件内容到内存中,也就是应用程 ...