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

源码:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Textarea Character Counter with Draggable Resizing</title>
<style>.container {position: relative;width: 100%;max-width: 280px; /* Adjust as needed */}#inputText {width: 100%;min-width: 280px; /* Minimum width to prevent shrinking */height: 100px; /* Adjust initial height as needed */min-height: 100px; /* Minimum height to prevent shrinking */box-sizing: border-box;padding: 10px;font-size: 14px; /* Adjust font size as needed */overflow: auto; /* Handle text overflow */}.counter {position: absolute;bottom: 10px;right: 10px;color: black;font-size: 12px; /* Adjust font size as needed */}.counter.max {color: red;}
</style>
</head>
<body>
<div class="container"><textarea id="inputText" rows="6" maxlength="150"></textarea><div id="charCount" class="counter">0/150</div>
</div><script>const textArea = document.getElementById('inputText');const charCount = document.getElementById('charCount');const minWidth = 280; // Minimum width for the textareatextArea.addEventListener('input', function() {const textLength = textArea.value.length;charCount.textContent = `${textLength}/150`;if (textLength >= 150) {charCount.classList.add('max');} else {charCount.classList.remove('max');}});// Function to handle mousemove event for resizingfunction handleResize(event) {const mouseX = event.clientX;const textareaRect = textArea.getBoundingClientRect();const containerRect = textArea.parentNode.getBoundingClientRect();let newWidth = mouseX - textareaRect.left;// Ensure new width respects minimum widthif (newWidth < minWidth) {newWidth = minWidth;}// Set new width to textareatextArea.style.width = newWidth + 'px';// Adjust counter position based on textarea width changecharCount.style.right = `${containerRect.right - textareaRect.right + 10}px`;}// Listen for mousedown event on textarea for starting resizetextArea.addEventListener('mousedown', function(event) {if (event.offsetX > textArea.offsetWidth - 10) {// Only start resize if mouse is near the right edgedocument.addEventListener('mousemove', handleResize);}});// Stop resizing on mouseup eventdocument.addEventListener('mouseup', function() {document.removeEventListener('mousemove', handleResize);});// Initial check on loadwindow.addEventListener('load', function() {const currentWidth = textArea.clientWidth;if (currentWidth < minWidth) {textArea.style.width = minWidth + 'px';}});
</script>
</body>
</html>

运行效果:

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

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

相关文章

python中对于函数中参数的详解

函数中参数时候很重要的&#xff0c;不仅仅是我们常用的一些必填参数&#xff0c;可缺省参数&#xff0c;还包括一些&#xff0c;关键字参数等&#xff0c;这边主要是自己一些学习心得~ 1.必填参数 顾名思义必填参数就是调用函数的时候必须传入的参数 def func1(a)&#xff1…

20240701给NanoPi R6C开发板编译友善之臂的Android12系统

20240701给NanoPi R6C开发板编译友善之臂的Android12系统 2024/7/1 14:19 本文采取这个模式编译&#xff1a;11.6.3 编译Android Tablet版本(首次编译) echo "ROCKCHIP_DEVICE_DIR : device/rockchip/rk3588/nanopi6" > .rockchip_device.mk # export INSTALL_GAP…

日志以及日志封装

日志 输出日志信息 import logging# 调用 指定级别 输入日志信息 logging.debug("this is a debug") logging.info("this is a info") logging.warning("this is a warning") logging.error("this is a error") logging.critical(&qu…

阿里云再次突发故障,高可用形同虚设?

作者&#xff1a;IT邦德 中国DBA联盟(ACDU)成员&#xff0c;10余年DBA工作经验&#xff0c; Oracle、PostgreSQL ACE CSDN博客专家及B站知名UP主&#xff0c;全网粉丝10万 擅长主流Oracle、MySQL、PG、高斯及Greenplum备份恢复&#xff0c; 安装迁移&#xff0c;性能优化、故障…

【UE 网络】多人游戏开发时应该如何区分客户端逻辑和服务端逻辑 入门篇

目录 0 引言1 服务器和客户端逻辑1.1 服务器职责1.2 客户端职责 2 函数会在客户端执行还是服务端&#xff1f;2.1 只在客户端执行的函数RepNotifyClient RPCMulticast RPC 2.2 只在服务端执行的函数GameModeServer RPC 2.3 在两端都可以执行的函数GetNetMode() 和 HasAuthority…

用C#的MediaDevices程序集打开MTP设备(用usb线连接的手机)的文件夹

一、任务描述 1、可以访问MTP设备的桌面程序。 MTP设备&#xff1a;支持媒体传输协议(MTP)的设备&#xff0c;MTP简单来说就是一种PC与其他设备相连的一种协议&#xff0c;智能手机、平板电脑、数码相机等可以通过 USB 连接到电脑&#xff0c;并通过 MTP 协议传输媒体文件。点…

PLC_博图系列☞F_TRIG:检测信号下降沿

PLC_博图系列☞F_TRIG&#xff1a;检测信号下降沿 文章目录 PLC_博图系列☞F_TRIG&#xff1a;检测信号下降沿背景介绍F_TRIG&#xff1a; 检测信号下降沿说明参数示例 关键字&#xff1a; PLC、 西门子、 博图、 Siemens 、 F_TRIG 背景介绍 这是一篇关于PLC编程的文章&a…

Swift中的二分查找:全面指南

Swift中的二分查找&#xff1a;全面指南 简介 二分查找是计算机科学中的经典算法&#xff0c;被广泛用于在已排序的数组中高效地搜索目标值。与线性查找逐个检查每个元素不同&#xff0c;二分查找不断将搜索区间减半&#xff0c;因此在处理大数据集时要快得多。 在这篇博客中…

从零到百万用户的扩展之路

写在前面: 此博客内容已经同步到我的博客网站,如需要获得更优的阅读体验请前往https://mainjaylai.github.io/Blog/blog/system/design-system 设计一个支持数百万用户的系统是极具挑战性的,它是一段需要持续优化和不断改进的旅程。在这篇博客中,我们将构建一个支持单个用…

NC13611 树(dfs序+区间dp)

链接 思路&#xff1a; 容易知道对于同一种颜色的子图一定是仅由该颜色的点连通的。设我们要划分的个数为x&#xff08;x<k&#xff09;&#xff0c;也就是说我们要选出x-1条边&#xff0c;这里有种情况。那么我们需要选出x种颜色&#xff0c;这里有种情况。然后我们需要将…

双端队列广搜——AcWing 175. 电路维修

双端队列广搜 定义 双端队列广搜&#xff08;Breadth-First Search with a Deque&#xff09;是一种图或树的遍历算法变体&#xff0c;它利用了双端队列&#xff08;Deque&#xff0c;全称Double Ended Queue&#xff0c;允许在其两端进行插入和删除操作&#xff09;作为数据…

1996-2023年各省财政收支数据(无缺失)(地方财政一般预算收入、地方财政一般预算支出)

1996-2023年各省财政收支数据&#xff08;无缺失&#xff09;&#xff08;地方财政一般预算收入、地方财政一般预算支出&#xff09; 1、时间&#xff1a;1996-2023年 2、来源&#xff1a;国家统计局、统计年鉴、 3、指标&#xff1a;地方财政一般预算收入、地方财政一般预算…

跨境业务经验推荐:三大优秀的IP代理服务商

作为一名多年从事跨境业务的老手&#xff0c;今天我要给大家介绍几款绝对靠谱的IP代理服务商&#xff0c;保证让你的全球业务更加顺畅&#xff01; 1. 711Proxy 711Proxy以其优秀的性能和覆盖范围广而著称。对于跨境电商和国际业务来说&#xff0c;快速稳定的网络连接至关重要…

d3dx9_43.dll丢失怎么解决?d3dx9_43.dll怎么安装详细教程

在使用计算机中&#xff0c;如果遇到d3dx9_43.dll丢失或许找不到d3dx9_43.dll无法运行打开软件怎么办&#xff1f;这个是非常常见问题&#xff0c;下面我详细介绍一下d3dx9_43.dll是什么文件与d3dx9_43.dll的各种问题以及d3dx9_43.dll丢失的多个解决方法&#xff01; 一、d3dx9…

Zynq—按键控制LED灯闪烁

一、GPIO简介 ZYNQ 的 IO包括对外连接的 GPIO 和内部 PS 与 PL 通信的 AXIO。其中对外的 GPIO 又分为 两种&#xff1a; MIO 和 EMIO。 MIO 和 EMIO 只是 GPIO 信号的两种接口&#xff0c; MIO 直连到PS(数量有限)&#xff0c; EMIO 则是 PS 扩展到 PL&#xff0c;从 PL 接出的…

UTONMOS:探索未来区块链与元宇宙的游戏奇妙融合

在科技的飞速发展浪潮中&#xff0c;区块链技术正以前所未有的力量重塑着各个领域&#xff0c;而游戏行业也迎来了一场前所未有的变革——元宇宙游戏的崛起。 元宇宙&#xff0c;这个充满无限想象的虚拟世界&#xff0c;让玩家能够沉浸其中&#xff0c;体验超越现实的奇幻之旅。…

springboot评选投票系统-计算机毕业设计源码15837

摘 要 本文介绍的是基于Spring Boot开发的评选投票系统小程序。该系统旨在为用户提供一个便捷、高效的平台&#xff0c;以实现评选活动的投票功能。随着社交媒体和互联网的普及&#xff0c;评选活动已成为各行业中常见的形式&#xff0c;如最佳歌曲、最佳演员等。然而&#xf…

探索PcapPlusPlus开源库:网络数据包处理与性能优化

文章目录 0. 本文概要1. PcapPlusPlus介绍1.1 概述1.2主要特性和功能1.3 PcapPlusPlus 主要模块关系和依赖1.4 网络协议层处理过程 2. 实例2.1 基于 PcapPlusPlus 的应用程序设计和封装流程&#xff1a;2.2 多线程示例代码2.3 代码说明&#xff1a; 3. 程序性能进一步优化3.1 避…

指哪打哪,重绘神器!我已出手…

最近AI界又爆出了一个大新闻&#xff0c;阿里巴巴、香港大学和蚂蚁集团的研究人员联合推出了一款超厉害的AI工具——MimicBrush&#xff0c;它的问世&#xff0c;无疑给图像编辑领域带来了一场革命&#xff0c;它就像魔法师手中的魔杖&#xff0c;轻轻一挥&#xff0c;就能让图…

隐私计算实训营第二期第七课:XGB算法与SGB算法开发实践

隐私计算实训营第二期-第七课 第七课&#xff1a;XGB算法与SGB算法开发实践1 决策树模型1.1 决策树的训练和预测过程1.2 决策树的发展过程 2 GBDT模型2.1 Boosting核心思想2.2 GBDT原理 3 XGB模型3.1 XGB核心思想3.2 XGB优点 3 隐语纵向树模型3.1 数据纵向分割3.2 隐私保护的树…