当前位置: 首页 > news >正文

js 实现textarea输入字数提示

一、先看效果图
图片描述

效果如图,当输入文字的时候,提示区域动态的显示已输入的字数和最大输入的字数。非常常用的小功能。
二、知识点
知识点比较简单,为了兼容性好些,我多用了几个事件input、propertychange、paste、keyup。现在好多用vue等框架写,我暂时先用jQuery写了,原因是读者比较好理解,需要其他方式也便于修改,高手估计也不用看这些东西啦哈哈哈。
三、上代码。
我当初学习的时候就希望多看demo,可我找到的资料往往是讲一些要点,写一些代码片段,所以我尽量的直接上代码了。

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="js/jquery-2.1.0.js"></script>
    </head>

    <body>
        <div id="div1">
            <textarea id="text" rows="8" cols="15"></textarea>
            <span></span>
        </div>
        <div id="viewBox">
            <!--这里是显示提示的区域-->
        </div>
        <script type="text/javascript">
            LimitedNnumber("#text", "#viewBox", 9)//调用函数需要传入三个参数,分别为,输入框、显示框、限制的长度(这里是9)

            function LimitedNnumber(eventBox, viewBox, textLength) {//调用函数需要传入三个参数,分别为,输入框、显示框、限制的长度
                $(document).on('input propertychange paste keyup', eventBox, function(event) {
                    this.value = this.value.replace(this.value.slice(textLength), "")//超出长度的部分替换为空
                    $(viewBox).html(this.value.length + "/" + textLength)
                })
            }
        </script>
    </body>

</html>

相关文章:

  • MVP open day 2009 (一)
  • PHP那些事儿
  • FarmCraft[POI2014]
  • Google知道你多少秘密
  • 《Java语言导学(原书第6版)》一一1.1 关于Java技术
  • 机器学习系列(8)_读《Nature》论文,看AlphaGo养成
  • TCP负载均衡地址转换
  • 新Tegra将问世:8核ARM再配CUDA GPU
  • Intent的使用
  • 《设计原本—计算机科学巨匠Frederick P. Brooks的反思》一一2.3 理性模型有哪些长处...
  • 沟通在一个运维服务项目中的重要性
  • 一个APP从启动到主页面显示经历了哪些过程?
  • 超级简单:如何更快的将数据导入Excel
  • springboot同mybatis整合
  • 博达路由器常见功能教学1
  • 4月23日世界读书日 网络营销论坛推荐《正在爆发的营销革命》
  • 77. Combinations
  • Apache的80端口被占用以及访问时报错403
  • Facebook AccountKit 接入的坑点
  • JavaScript的使用你知道几种?(上)
  • JS变量作用域
  • leetcode98. Validate Binary Search Tree
  • nodejs调试方法
  • python docx文档转html页面
  • socket.io+express实现聊天室的思考(三)
  • Terraform入门 - 1. 安装Terraform
  • UMLCHINA 首席专家潘加宇鼎力推荐
  • 爱情 北京女病人
  • 构造函数(constructor)与原型链(prototype)关系
  • 前言-如何学习区块链
  • 如何用vue打造一个移动端音乐播放器
  • 软件开发学习的5大技巧,你知道吗?
  • 数据可视化之 Sankey 桑基图的实现
  • 算法系列——算法入门之递归分而治之思想的实现
  • 找一份好的前端工作,起点很重要
  • ​创新驱动,边缘计算领袖:亚马逊云科技海外服务器服务再进化
  • ​云纳万物 · 数皆有言|2021 七牛云战略发布会启幕,邀您赴约
  • $(document).ready(function(){}), $().ready(function(){})和$(function(){})三者区别
  • (02)vite环境变量配置
  • (9)目标检测_SSD的原理
  • (C语言)输入自定义个数的整数,打印出最大值和最小值
  • (echarts)echarts使用时重新加载数据之前的数据存留在图上的问题
  • (备忘)Java Map 遍历
  • (二)Eureka服务搭建,服务注册,服务发现
  • (附源码)node.js知识分享网站 毕业设计 202038
  • (机器学习的矩阵)(向量、矩阵与多元线性回归)
  • (六)库存超卖案例实战——使用mysql分布式锁解决“超卖”问题
  • (转) RFS+AutoItLibrary测试web对话框
  • (转)树状数组
  • .NET Core 项目指定SDK版本
  • .net core开源商城系统源码,支持可视化布局小程序
  • .Net Core与存储过程(一)
  • .NET 服务 ServiceController
  • .NET开发人员必知的八个网站
  • [ C++ ] STL---stack与queue