<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. 20189220 余超《Linux内核原理与分析》第七周作业

    分析Linux内核创建一个新进程的过程 基础知识概括 操作系统内核实现操作系统的三大管理功能,即进程管理功能,内存管理和文件系统.对应的三个抽象的概念是进程,虚拟内存和文件.其中,操作系统最核心的功能 ...

  2. 搭建阿里云服务 FTP 折中方案

    该配置的服务都配置了,端口也都打开了 ,但是ftp  就是连接不上 就是打不开目录 8uftp  出现以下情况 配置文件逐条检查,端口逐个检查 都没有问题,还是出现这种情况,实在没辙,蛋疼...... ...

  3. SQLServer ROW_NUMBER()函数使用方法 分区排序

    #ROW_NUMBER() over()能干什么? 既可满足分区的需求,也可以根据一定的顺序来排序. #细细说 select ROW_NUMBER() over(partition by xm Ord ...

  4. ArrayList: java之ArrayList详细介绍(转)

    1  ArrayList介绍 ArrayList简介 ArrayList 是一个数组队列,相当于 动态数组.与Java中的数组相比,它的容量能动态增长.它继承于AbstractList,实现了List ...

  5. word/wps 制作下拉列表

    准备: 1.数据页 2.项目名称sheet 3.问题类型sheet 开始制作: 数据 --- 有效性 --- 允许“序列” --- 来源 -- 其他sheet页“单元格”选择范围 回车.确定 即可

  6. Python装饰器之functools.wraps的作用

    # -*- coding: utf-8 -*- # author:baoshan def wrapper(func): def inner_function(): pass return inner_ ...

  7. Python3基础 tuple list转为tuple

             Python : 3.7.3          OS : Ubuntu 18.04.2 LTS         IDE : pycharm-community-2019.1.3    ...

  8. Spring cloud微服务安全实战-7-10ELK日志采集架构优化

    ELK搭建起来.采集日志,展示.但是这个架构还有一些问题. 可用性的问题,springboot的应用,随着业务的增长会越来越多.logstash压力就会越来越大.大到一定的程度可能就会吧logstas ...

  9. 一秒解决CentOS下service 功能 不能使用 bash: service: command not found

    首先检查自己是否 使用的是root用户 如果是并且还不能用-----执行以下操作 在centos系统中,如果/sbin目录下没有service这个命令,就会出现 bash: service: comm ...

  10. layui table.reload的bug

    bug1: bug描述:当cols列在reload中有变化时,渲染后部分cols列自动隐藏(并未对这些列设置hide:true) bug版本:2.3.5版本有此bug,今日更新最新版本2.5.5 仍有 ...