<html>

    <header>

        <meta charset="utf-8">

        <title>测试实时字数显示</title>

    </header>

    <body>

        <div style="text-align: center;margin-top: 8%;">

            <h3>字数输入实时统计</h3>

            <textarea id="area" name="ss" placeholder="请输入文本内容" style="width: 50%;height: 35%;"></textarea>

            <p>当前字数为:<span id="text-count">0</span>,最大字数支持1.5万字（一个汉字、一个英语字母、一个标点符号均占用一个字符。）</p>

        </div>

    </body>

    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>

    <script type="text/javascript">

        /*字数限制 需要修改字数范围，下面15000换掉即可*/

        $("#area").on("input propertychange", function() {

            var $this = $(this),

                _val = $this.val(),

                count = "";

             if (_val.length > 15000) {

                $this.val(_val.substring(0, 15000));

             }

            count =$this.val().length;

            $("#text-count").text(count);

        });

    </script>

</html>

jquery实现输入框实时统计字数和设置字数限制功能的更多相关文章

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

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

  2. JavaScript 实现textarea限制输入字数， 输入框字数实时统计更新，输入框实时字数计算移动端bug解决

    textarea称文本域,又称文本区,即有滚动条的多行文本输入控件,在网页的提交表单中经常用到.与单行文本框text控件不同,它不能通过maxlength属性来限制字数,为此必须寻求其他方法来加以限制 ...

  3. jQuery - 实时统计输入框输入个数（中文输入法适用）

    经常在实时统计文本框输入多少字的时候,有时会出现不及时统计,特别是在中文输入法下. 为了实时准确统计,可以修改代码如下:     $(function() {        $("#txtT ...

  4. jquery easyui 输入框 禁止输入负数 设置属性data-options="min:0,required:true"

    jquery easyui  输入框 禁止输入负数  设置属性data-options="min:0,required:true" <input id="days& ...

  5. jquery的输入框自动补全功能+ajax

    jquery的输入框自动补全功能+ajax 2017年05月10日 18:51:39 辣姐什么鬼 阅读数:1461 标签: web前端 更多 个人分类: web前端   内容参考网友文章写成,原博的链 ...

  6. oninput、onchange与onpropertychange事件的区别, 与input输入框实时检测

    这几天项目着急,同时也学到好多以前没有接触过的知识.oninput.onchange与onpropertychange事件的区别, 与input输入框实时检测 onchange事件只在键盘或者鼠标操作 ...

  7. 基于Bootstrap使用jQuery实现输入框组input-group的添加与删除-改进版

    上一次说到了基于Bootstrap使用jQuery实现输入框组input-group的添加与删除 ,初始状态下只有一个输入框组,可以通过点击输入框组的右侧“+”(或自定义的文字)可以在原输入框组的下面 ...

  8. NetHogs---按进程或程序实时统计网络带宽使用率。

    NetHogs是一个开源的命令行工具(类似于Linux的top命令),用来按进程或程序实时统计网络带宽使用率. 来自NetHogs项目网站: NetHogs是一个小型的net top工具,不像大多数工 ...

  9. 实时统计每天pv,uv的sparkStreaming结合redis结果存入mysql供前端展示

    最近有个需求,实时统计pv,uv,结果按照date,hour,pv,uv来展示,按天统计,第二天重新统计,当然了实际还需要按照类型字段分类统计pv,uv,比如按照date,hour,pv,uv,typ ...

随机推荐

  1. ubuntu之路——day17.2 RGB图像的卷积、多个filter的输出、单个卷积层的标记方法

    和单层图像的卷积类似,只需要对每一个filter构成的三层立方体上的每一个数字与原图像对应位置的数字相乘相加求和即可. 在这个时候可以分别设置filter的R.G.B三层,可以同时检测纵向或横向边缘, ...

  2. html5 css3 背景视频循环播放代码

    <div style ="position: absolute; z-index: -1; top: 0px; left: 0px; bottom: 0px; right: 0px; ...

  3. Android 属性property_get/property_set

    每个属性都有一个名称和值,他们都是字符串格式.属性被大量使用在Android系统中,用来记录系统设置或进程之间的信息交换.属性是在整个系统中全局可见的.每个进程可以get/set属性. 在系统初始化时 ...

  4. sqlite数据库使用具体案例以及mysqlite.db数据库

    本文操作是测试数据库的其中一张表,其中包括清空sqlite数据库MyGroup表中的数据,清空sqlite数据库sqlite_sequence表中的自增变量,sqlite数据库MyGroup直接插入数 ...

  5. Java线程同步的Monitor机制(Lock配合Condition)

    Monitor模式是一种常见的并行开发机制, 一个Monitor实例可以被多个线程安全使用, 所有的monitor下面的方法在运行时是互斥的, 这种互斥机制机制可以用于一些特性, 例如让线程等待某种条 ...

  6. PostgreSQL--with子句

    在PostgreSQL中,WITH查询提供了一种编写辅助语句的方法,以便在更大的查询中使用.它有助于将复杂的大型查询分解为更简单的表单,便于阅读.这些语句通常称为公共表表达式(Common Table ...

  7. 011 @Retryable的使用

    一:概述 在调用第三方接口或者使用mq时,会出现网络抖动,连接超时等网络异常,所以需要重试. 为了使处理更加健壮并且不太容易出现故障,后续的尝试操作,有时候会帮助失败的操作最后执行成功. 例如,由于网 ...

  8. # advanced packaging

    目录 advanced packaging ASM NEXX ASMPT完成收購NEXX 準備就緒迎接先進半導體封裝之高速增長 Intro Bumping 产品供应 晶圆溅镀– Apollo 300 ...

  9. 配置mongo.conf文件

    配置mongo.conf文件,优化mongod.exe的启动 在d:/Develop/MongoDB目录下创建mongo.conf文件并写入:   dbpath=d:\Develop\MongoDB\ ...

  10. LODOP中无规律无法还原偶尔出现问题排查

    一些问题无法还原且偶尔出现,没法通过做例子来展示问题,为了找到问题在哪里,就需要排查定位问题 .由于这些问题偶尔出现,且无规律,出现频率低,所以只能不断通过各种对比测试,定位排查到问题和什么有关.如果 ...