起初会想到使用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. jdk8-stream-并行流的使用

    使用jdk的stream, 可以非常方便的将串行改为并行 1, 判断是否质数 /** * 将一个stream改成简单的并行 */ @Test public void test1() { // 串行 , ...

  2. ABP框架源码中的Linq扩展方法

    文件目录:aspnetboilerplate-dev\aspnetboilerplate-dev\src\Abp\Collections\Extensions\EnumerableExtensions ...

  3. .gvimrc配置备份

    syn on "语法支持 colorscheme murphy set go= "common conf {{ 通用配置 "set ai "自动缩进 set b ...

  4. 第四章 使用Servlet处理HTTP请求

      回顾上一章的知识: 请求网络资源HTTP会发出多个请求并得到响应 设置响应状态行关键是设置状态码 在向客户端输出内容之前要设置状态码和响应头 设置响应头让Servlet发挥最大功能 消息体可以用文 ...

  5. 第一次项目上Linux服务器（四：CentOS6下Mysql数据库的安装与配置（转））

    一.mysql简介 说到数据库,我们大多想到的是关系型数据库,比如mysql.oracle.sqlserver等等,这些数据库软件在windows上安装都非常的方便,在Linux上如果要安装数据库,咱 ...

  6. Mac Hadoop的安装与配置

    这里介绍Hadoop在mac下的安装与配置. 安装及配置Hadoop 首先安装Hadoop $ brew install Hadoop 配置ssh免密码登录 用dsa密钥认证来生成一对公钥和私钥: $ ...

  7. ASP.NET MVC的JavaScriptResult

    前段时间,我们有学习<在ASP.NET MVC使用JavaScriptResult>http://www.cnblogs.com/insus/p/3960994.html ,今天我们来加强 ...

  8. MVC之——Razor语法

    实例产品基于asp.net mvc 5.0框架,源码下载地址:http://www.jinhusns.com/Products/Download View里所有以@开头或@(/*代码*)的部分代码都会 ...

  9. PowerDesigner 创建表格及导出SQL语句

    PowerDesigner 创建表格及导出SQL语句   目的:提高数据库创建表格效率 测试数据库:orcale 1.新建物理模型. 右键点击workplace,new一个物理模型并指定数据库. 2. ...

  10. 如何通过DataGridView 实现单元格合并和二维表头

    先看下实现出来的效果(这里随便写了几组数据,用来测试) 先初始一个DataGridView 设置哪几列 DataGridView 里男女这两列的 AutoSizeMode 可以设置Fill. publ ...