如何优雅地限制textarea的输入字数?

大家好,我是瑶山,今天聊聊textarea

textarea

有基础的同学都知道<textarea>是HTML中的一个标签,用于定义多行的文本输入控件。它允许用户在表单中输入多行文本,相较于单行输入框可以输入更多的内容。

但是,如果我们不想用户无限制字数的输入,该怎么做呢?

加个maxlength不就好了

使用maxlength限制

maxlength:这个属性用于限制用户输入的文本长度,超过设定的长度将无法输入

多行文本:<textarea name="title" rows="5" maxlength="20"></textarea>

当maxlength="20"时,输完20个字符后,你会发现不管再输入什么,文本框都不会有任何变化了。

当然,这种静默的方式给你用户的体验可能不是很好,我们希望能给用户提供更明显的反馈

剩余字数提醒

首先,我们要给textarea添加一个“守门员”——事件监听器。这个“守门员”会时刻关注着textarea里的内容变化,一旦发现有“超员”的情况,就用substring方法把内容截断到最大字数。

除了限制字数,我们还可以给用户提供一些额外的提示,比如显示当前已经输入了多少字,还剩下多少字数可以输入。这样,用户就能更清楚地掌握自己的输入进度了。

以下是一个简单的示例

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>限制 Textarea 字数</title>
</head>
<body><textarea id="myTextarea" rows="4" cols="50" maxlength="20"></textarea>
<p id="characterCount">你还可以输入 <span id="remainingChars">20</span> 个字符</p><script>const textarea = document.getElementById('myTextarea');const characterCount = document.getElementById('characterCount');const remainingChars = document.getElementById('remainingChars');const maxCharacters = 20; // 设置最大字数textarea.addEventListener('input', function() {const currentCharacters = this.value.length;const remaining = maxCharacters - currentCharacters;// 更新剩余字符数remainingChars.textContent = remaining > 0 ? remaining : 0;// 如果超过最大字数,则截断内容if (currentCharacters > maxCharacters) {this.value = this.value.substring(0, maxCharacters);}});
</script></body>
</html>

效果如下

限制textarea的输入字数并不是一件难事,只要我们用对方法,就能既保证用户体验,又避免数据冗余。下次当你需要限制textarea的输入字数时,不妨试试这个方法吧! 

ending

人的一生 必须要学会做一件事 而且要做到透彻 才不枉此生... 共勉 💪。

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

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

相关文章

【牛客面试必刷TOP101】Day33.BM70 兑换零钱(一)和BM71 最长上升子序列(一)

文章目录 前言一、BM70 兑换零钱(一)题目描述题目解析二、BM71 最长上升子序列(一)题目描述题目解析总结 前言 一、BM70 兑换零钱(一) 题目描述 描述&#xff1a; 给定数组arr&#xff0c;arr中所有的值都为正整数且不重复。每个值代表一种面值的货币&#xff0c;每种面值的货币…

7.华为交换机端口配置链路聚合Eth-trunk

目的&#xff1a;两台华为交换机端口配置链路聚合 LSW1配置 [Huawei]interface Eth-Trunk 1 [Huawei-Eth-Trunk1]q [Huawei]int g0/0/1 [Huawei-GigabitEthernet0/0/1]eth-trunk 1 [Huawei-GigabitEthernet0/0/1]int g0/0/2 [Huawei-GigabitEthernet0/0/2]eth-trunk 1LSW2配置…

计算机网络:运输层 - 概述

计算机网络&#xff1a;运输层 - 概述 运输层的任务端口号复用与分用UDP协议首部格式 TCP协议面向字节流 运输层的任务 物理层、数据链路层以及网络层&#xff0c;他们共同解决了将主机通过网络互联起来所面临的问题&#xff0c;实现了主机到主机的通信。 网络层的作用范围是…

如何使用GPT?初学者的指南

ChatGPT是一个非常先进的AI工具&#xff0c;它使用GPT-4架构&#xff0c;能够生成自然的语言回应。它的多功能性和理解复杂指令的能力&#xff0c;使得很多人用它来回答各种问题&#xff0c;就像用Google一样输入关键词。不过&#xff0c;ChatGPT还能做更多事情&#xff0c;下面…

智能网联汽车安全问题

随着数字技术及智能网联汽车产业的迅猛发展&#xff0c;智能网联汽车作为未来交通系统的重要组成部分&#xff0c;其网络安全性和可靠性问题日益凸显&#xff0c;与人们的生命财产安全息息相关。因此&#xff0c;深度分析智能网联汽车面临的网络安全风险&#xff0c;全面开展数…

ArcGIS arcpy代码工具——关于工具使用的软件环境说明

系列文章目录 ArcGIS arcpy代码工具——批量对MXD文件的页面布局设置修改 ArcGIS arcpy代码工具——数据驱动工具批量导出MXD文档并同步导出图片 ArcGIS arcpy代码工具——将要素属性表字段及要素截图插入word模板 ArcGIS arcpy代码工具——定制属性表字段输出表格 ArcGIS arc…

Linux中的进程控制

Linux中的进程控制 &#xff08;1&#xff09;C程序示例&#xff0c;使用fork()创建一个子进程&#xff1a; #include <stdio.h> #include <stdlib.h> #include <unistd.h> #include <sys/wait.h> int main() { pid_t pid; int status; in…

【Redis】java客户端(SpringData和jedis)

https://www.oz6.cn/articles/58 https://www.bilibili.com/video/BV1cr4y1671t/?p16 redis官网客户端介绍&#xff1a;https://redis.io/docs/latest/develop/connect/clients/ jedis maven引入依赖 <dependencies><!--引入Jedis依赖--><dependency><…

cms XAMPP搭建帝国cms示例(用于代码审计)

网上大部分都是小皮因为是一键很省事&#xff0c;但本人一直用的xampp所以若有人也是用xampp搭建可以看此篇文章 这里示例为 帝国CMS -v7.5 xampp搭建过程中如果本机存在mysql服务则需要先将mysql服务停止在start xampp的mysql服务 任务管理器----->服务----->找到mys…

React Hooks深度解析:`useEffect`模拟生命周期

React Hooks深度解析&#xff1a;useEffect模拟生命周期 大家好&#xff0c;我是极客前端探索者&#xff0c;今天我们将一起深入探讨React中的useEffect Hook&#xff0c;以及如何利用它来模拟类组件的componentDidMount和componentDidUpdate生命周期方法。如果你对React Hook…

揭秘网络盗版游戏产业链,守护游戏安全 | 天堂1私服非法牟利,涉嫌洗黑钱!

近年来&#xff0c;网络盗版游戏现象日益猖獗&#xff0c;尤其是天堂1私服。这些盗版游戏不仅非法牟利&#xff0c;还存在偷税漏税、诱导消费等违法行为。本文将揭示这一产业链的真相&#xff0c;提醒广大游戏玩家保持警惕&#xff0c;并向相关部门举报&#xff0c;共同维护互联…

Vue3源码【三】—— createApp执行流程源码分析

使用 在vue3当中是通过createApp将页面给挂在到index.html文件根元素下。下面是一个使用的例子&#xff0c;那么他是怎么运行的呢&#xff1f;又是怎么做的一个链式调用呢&#xff1f;下面就来一一分析 createApp(App) // APP是一个vue组件.use(ElementPlus, { // 注册El-pl…

从0开始开发一个简单web界面的学习笔记(HTML类)

文章目录 什么是HTML页面vscode 开放工具搭建第一个HTML页面编写vscode 如何快速生成代码框架html标签——注释、标题、段落、换行标签格式化标签img 标签(src 属性01)img 属性02(alt、title、width/height、border)a标签href属性a标签target属性表格标签01 基本属性表格标签02…

【JAVA入门】Day08 - 静态变量

【JAVA入门】Day08 - 静态变量 文章目录 【JAVA入门】Day08 - 静态变量【补充】工具类 静态是面向对象中的一个概念&#xff0c;用英文标识符表示是 static。 在一个标准 JavaBean 类中&#xff0c;static 类型的变量和方法经常被使用。 public class Student {//属性…

css伪类和伪元素选择器

伪类选择器关注元素的状态和条件&#xff0c;而伪元素选择器则关注元素的视觉表现和扩展。两者都是CSS中强大的工具&#xff0c;能够帮助开发者实现复杂的样式布局和交互效果。 伪类选择器 伪类选择器在CSS中用于选择元素的特定状态或位置。以下是一些常见的伪类选择器及其使…

LeetCode:2288.价格减免(Java 字符串处理)

目录 2288.价格减免 题目描述&#xff1a; 实现代码与解析&#xff1a; 模拟 原理思路&#xff1a; 2288.价格减免 题目描述&#xff1a; 句子 是由若干个单词组成的字符串&#xff0c;单词之间用单个空格分隔&#xff0c;其中每个单词可以包含数字、小写字母、和美元符号…

AV1:帧间预测(一)参考帧管理

​AV1中帧类型 在H.26X系列标准中&#xff0c;根据帧允许的预测模式可以将帧分为I帧、P帧和B帧&#xff0c;根据帧在码流中前后的参考关系又可以分为IRAP、RADL等。AV1也类似地将帧分为4种类型&#xff0c;在码流中用frame_type来标识帧类型。 KEY_FRAME&#xff1a;相当于IDR帧…

HTB Editorial

Editorial User Nmap ┌──(kali㉿kali)-[~/…/machine/SeasonV/linux/Editorial] └─$ nmap -A 10.129.24.67 -T 4 Starting Nmap 7.94SVN ( https://nmap.org ) at 2024-06-16 21:54 EDT Nmap scan report for 10.129.2…

C#使用轻量级深度学习模型进行车牌颜色识别和车牌号识别

看到这个文章时候请注意这个不涉及到车牌检测&#xff0c;这个仅仅是车牌颜色和车牌号识别&#xff0c;如果想涉及到车牌检测可以参考这个博客&#xff1a;[C#]winform部署yolov7CRNN实现车牌颜色识别车牌号检测识别_c# yolo 车牌识别-CSDN博客 【训练源码】 https://github.…

DBeaver windows下载、安装与连接数据库

下载 官网下载地址&#xff1a;https://dbeaver.io/download/ 安装 1、双击安装 2、下一步…… 选择所有用户 3、组件选择 配置连接数据库 下载驱动