对原生input加上:当前输入字数/最大输入字数

源码:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>/* 样式调整 */.input-container {display: flex;align-items: center; /* 垂直居中对齐 */}#input {/* flex: 1;  *//* 输入框占据剩余空间 */margin-right: 10px; /* 右侧留出一定的间隔 */}#counter {font-size: 12px; /* 字号调整 */}.max-length-reached {color: red; /* 计数器文字变成红色 */}</style>
</head>
<body><div class="input-container"><input id="input" type="text" maxlength="30"><div id="counter">0/30</div></div><script>// 获取输入框和计数器的元素const input = document.getElementById('input');const counter = document.getElementById('counter');const maxLength = parseInt(input.getAttribute('maxlength')); // 获取最大输入长度并转换为整数// 监听输入框的输入事件input.addEventListener('input', function() {// 获取已输入的字数const enteredLength = input.value.length;// 更新计数器的文本内容counter.textContent = `${enteredLength}/${maxLength}`;// 如果已输入的字数达到最大限制,将计数器的颜色设为红色if (enteredLength === maxLength) {counter.classList.add('max-length-reached');} else {counter.classList.remove('max-length-reached');}});</script>
</body>
</html>

运行结果:

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/364829.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

商城自动化测试实战 —— 登录+滑块验证

hello大家好&#xff0c;我是你们的小编&#xff01; 本商城测试项目采取PO模型和数据分离式架构&#xff0c;采用pytestseleniumjenkins结合的方式进行脚本编写与运行&#xff0c;项目架构如下&#xff1a; 1、创建项目名称&#xff1a;code_shopping&#xff0c;创建所需项目…

常微分方程算法之编程示例五(阿当姆斯法)

目录 一、研究问题 二、C++代码 三、计算结果 一、研究问题 本节我们采用阿当姆斯法(Adams法)求解算例。 阿当姆斯法的原理及推导请参考: 常微分方程算法之阿当姆斯法(Adams法)_四步四阶adams显格式;三步四阶adams隐格式;四阶adams预估-校正格式-CSDN博客https://blog…

Linux系统编程--进程间通信

目录 1. 介绍 1.1 进程间通信的目的 1.2 进程间通信的分类 2. 管道 2.1 什么是管道 2.2 匿名管道 2.2.1 接口 2.2.2 步骤--以父子进程通信为例 2.2.3 站在文件描述符角度-深度理解 2.2.4 管道代码 2.2.5 读写特征 2.2.6 管道特征 2.3 命名管道 2.3.1 接口 2.3.2…

Nginx中封装的数据结构

Nginx中封装的数据结构 Nginx中封装的数据结构整型ngx_str_t【字符串】ngx_list_t【链表】ngx_table_elt_t【key/value】ngx_buf_tngx_chain_t Nginx中封装的数据结构 整型 typedef intptr_t ngx_int_t; typedef uintptr_t ngx_uint_t;ngx_str_t【字符串】 typ…

【面试题】信息系统安全运维要做什么

信息系统安全运维是确保信息系统稳定、可靠、安全运行的一系列活动和措施。 其主要包括以下几个方面&#xff1a; 1.系统监控&#xff1a; 实时监测信息系统的运行状态&#xff0c;如服务器的性能指标、网络流量、应用程序的运行情况等。通过监控工具&#xff0c;及时发现系统…

What does the error ‘module ‘langchain‘ has no attribute ‘verbose‘ refer to?

题意&#xff1a;错误 module langchain has no attribute verbose 指的是什么意思&#xff1f; 问题背景&#xff1a; Kind of new to Langchain/Qdrant but Im building a recommendation engine to recommend users based on the contents of their associated PDF files, …

typora取消源代码模式

如果typora不小心设置成了源代码模式 关闭源代码模式&#xff1a;

Django-开发一个列表页面

需求 基于ListView,创建一个列表视图,用于展示"BookInfo"表的信息要求提供分页提供对书名,作者,描述的查询功能 示例展示: 1. 数据模型 models.py class BookInfo(models.Model):titlemodels.CharField(verbose_name"书名",max_length100)authormode…

git 用户名密码Clone代码

#密码中包含&#xff0c;则使用%40代表 cd /disk03/wwwroot/GitDemo/BuildTemp && git clone -b dev --single-branch http://root:test%40123192.168.31.104/root/SaaS.Auto.Api.git git pull origin dev 今天使用LibGit2Sharp在Linux上Clone代码时报错&#xff0c;因…

使用 go-control-plane 自定义服务网格控制面

写在前面 阅读本文需要最起码了解envoy相关的概念 本文只是一个类似于demo的测试&#xff0c;只为了学习istio&#xff0c;更好的理解istio中的控制面和数据面&#xff08;pilot -> proxy&#xff09;是如何交互的&#xff0c;下图的蓝色虚线 先说go-control-plane是什么…

MySQL高级-MVCC-原理分析(RC级别)

文章目录 1、RC隔离级别下&#xff0c;在事务中每一次执行快照读时生成ReadView2、先来看第一次快照读具体的读取过程&#xff1a;3、再来看第二次快照读具体的读取过程: 1、RC隔离级别下&#xff0c;在事务中每一次执行快照读时生成ReadView 我们就来分析事务5中&#xff0c;两…

柯桥法语学习|学点黑话!法语中的「钱」可不止“argent”

法语中有哪些关于钱的“黑话”&#xff1f;一起来和法语君看一下吧&#xff01; bl 之所以繁杂&#xff0c;是因为这些词在诞生之初&#xff0c;不止涉及一个故事&#xff0c;而是一大堆小轶事&#xff0c;以“bl”指钱的起源如迷宫般复杂。 根据Trsor de la langue frana15857…

VMware17安装Ubuntu20版本-保姆级别

首先需要安装好VMware和Ubuntu20的镜像&#xff0c;在网上搜索Ubuntu镜像下载即可&#xff0c;最后选择国内镜像站下载&#xff0c;这样更快点&#xff0c;然后打开VMware。 1.创建虚拟机&#xff1a; 2.选择自定义&#xff1a; 3.默认&#xff0c;继续下一步&#xff1a; 4.选…

kubuadm 方式部署 k8s 集群

准备三台机器 主机名IP地址CPU/内存角色K8S版本Docker版本k8s231192.168.99.2312C4Gmaster1.23.1720.10.24k8s232192.168.99.2322C4Gwoker1.23.1720.10.24k8s233192.168.99.2332C4Gwoker1.23.1720.10.24 需要在K8S集群各节点上面安装docker&#xff0c;如未安装则参考 …

江协科技51单片机学习- p21 LED点阵屏(8*8)

&#x1f680;write in front&#x1f680; &#x1f50e;大家好&#xff0c;我是黄桃罐头&#xff0c;希望你看完之后&#xff0c;能对你有所帮助&#xff0c;不足请指正&#xff01;共同学习交流 &#x1f381;欢迎各位→点赞&#x1f44d; 收藏⭐️ 留言&#x1f4dd;​…

ASP.NET CORE应用针对IIS有哪两种部署模式?

一、ASP.NET CORE Core Module IIS其实也是按照管道的方式来处理请求的&#xff0c;但是IIS管道和ASP.NET CORE中间件管道有本质的不同。对于部署在IIS中的Web应用来说&#xff0c;从最初接收到请求到最终将响应发出去&#xff0c;这段处理流程被细分为一系列固定的步骤&#x…

Python pip install模块时C++编译环境问题

pip install模块时C编译环境问题 在接触和使用python后&#xff0c;常常会通过pip install命令安装第三方模块&#xff0c;大多数模块可以直接安装&#xff0c;但许多新同学仍会遇见某些模块需要实时编译后才能安装&#xff0c;如报错信息大概是缺乏C编译环境&#xff0c;本文则…

MTK7628+MT7612 加PA定频数据

1、硬件型号TR726A5G121-DPA PC9.02.0017。如下所示&#xff1a; 2、WIFI5.8 AC模式 42&#xff08;5120MHz&#xff09;信道&#xff0c;80带宽 3、WIFI5.8 AC模式 38&#xff08;5190MHz&#xff09;信道&#xff0c;40带宽 4、WIFI5.8 AC模式 36&#xff08;5180 MHz&…

双指针-移动 0(easy)

目录 一、问题描述 二、解题思路 三、代码实现 四、刷题链接 一、问题描述 二、解题思路 1.开辟一个新数组&#xff0c;初始时元素都为0 2.设置两个指针&#xff0c;指针p1遍历旧数组&#xff0c;指针p2指向新数组的待修改位置 3.当p1指向非零元素时&#xff0c;将该元素…

Ubuntu20.04离线安装Docker

链接&#xff1a;https://pan.baidu.com/s/10OLClTHSIJY-_nbldcoFFQ 提取码&#xff1a;x4nt --来自百度网盘超级会员V4的分享 1.下载3个docker离线安装包&#xff0c;下载网址&#xff1a; https://download.docker.com/linux/ubuntu/dists/xenial/pool/stable/amd64/ 2.把…