<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. MySQL事务部分回滚-回滚到指定保存点

    我们可以在mysql事务处理过程中定义保存点(SAVEPOINT),然后回滚到指定的保存点前的状态. 定义保存点,以及回滚到指定保存点前状态的语法如下. 定义保存点---SAVEPOINT 保存点名; ...

  2. Java-Maven（十二）：idea多项目：common module进行compiler和install正常，运行domain-perf module提示：Could not resolve dependencies for project

    前提: product项目下有三个module,分别是: driver module domain-perf module common module 问题: driver 和 domain-perf ...

  3. SpringBoot——读取配置文件@Value和@Configuration比较

    1.@Configuration package com.xgcd.springboot.bean; import org.springframework.boot.context.propertie ...

  4. 带空格的 jquery ID 选择器

    当 DOM ID有一个空格时,如何使用 jquery 的 ID 选择器? 例如,我的 DOM ID 是 <div id="content Module">Stuff&l ...

  5. thinkphp---404错误页面

    在用thinkphp开发项目的时候,会额外的处理404错误页面,但是我们很多的开发人员,在处理404错误页面的时候,处理方式都是不对的. 普通处理404的操作是通过 $this->error() ...

  6. linux环境，无dig命令-bash: dig: command not found？

    背景描述: 今天使用dig命令,报错命令不存在,-bash: dig: command not found 解决: 通过yum方式安装 yum -y install bind-utils 备注:之前尝 ...

  7. Ubuntu下root账户无法使用xshell远程连接解决方法

    以前使用xshell连接服务器跑程序都很顺利,但这次整了一个root账户,发现居然连不上.百度一下,发现ubuntu系统本身是拒绝root账户远程连接的. 解决办法:参考点击传送门

  8. 【转】redis报错“max number of clients reached"

    查看redis监控的时候看到redis的graph出现不正常的情况,截图如下: 如上面截图所展示的样子,可以看到redis 的客户端连接数很突兀的上升到10K,又突然下降到0.排除了监控本身的原因,很 ...

  9. 【翻译】Flink Table Api & SQL — 用户定义函数

    本文翻译自官网:User-defined Functions  https://ci.apache.org/projects/flink/flink-docs-release-1.9/dev/tabl ...

  10. 逸鹏说道公众号福利：逆天常用的一些谷歌浏览器插件V1.3

    插件导出:http://www.cnblogs.com/dunitian/p/5426552.html 插件导入:https://www.cnblogs.com/dotnetcrazy/p/97537 ...