antd中TextArea限制十个字符但是表单获取到11个字符的问题及解决方案

最新推荐文章于 2025-05-21 15:48:33 发布
最新推荐文章于 2025-05-21 15:48:33 发布
阅读量1.6k 收藏 1
点赞数
CC 4.0 BY-SA版权
分类专栏： 前端 react 文章标签： antd
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_46412825/article/details/121125749
本文介绍了一个关于在Ant Design中使用TextArea组件时遇到的问题，即在设置了maxLength属性后，实际输入的字符数量超过限制仍能被表单验证获取到。文章详细分析了问题产生的原因，并给出了避免该问题的有效解决方案。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

一、如何限制TextArea输入个数

正常情况下我们限制TextArea的输入个数，只需要在标签里面输入maxLength={10}便可以限制只能输入10个字符了

二、问题出现的场景

因为结合了formItem使用，所以将TextArea放到了FormItem里面，但是由于ui要求需要实现如下布局：
所以我再TextArea的外面包了一层div，然后问题就出来了，虽然TextArea里面还是限制输入10个字符，但是通过form.validateFields（）拿到antd里的form表单后发现竟然拿到了11个字符，而且这11个字符前十个是我输入的内容，最后一个是我最后一次输入的超出的内容。

三、解决方式（如何避免）

在TextArea和Form表单进行结合使用的时候，不要在TextArea的外部套其他的标签

正确的如下：在这里插入图片描述
错误的如下：在这里插入图片描述
TextArea限制输入行数
natian306的专栏
04-15 8780
     某日接到用户在界面中的一个textArea中限制输入，他的要求是不给出具体允许输入的字符数（不关心字数），在固定宽高的textArea中，只允许输入3行。flexSDK3.3中只对具体最大字符数（maxChars）提供了限制，而对于行数的限制，并未支持。苦思冥想，最终找到解决方案，见下方代码：http://www.adobe.com/2006/mxml" layout="vertic
Antd文本框TextArea复制粘贴正确的文本却触发校验
qq_48617322的博客
01-13 241
Antd文本框，正常输入正确的文本没啥问题，但是当我从别处复制粘贴过来一段文本的时候就有问题了。
Textarea限制输入文本长度
12-25
自己写的一个小东西 前段时间自己要用在网上下载了一个 不过不好用，自己就写了一个 自我感觉还不错，而且对于限制输入的东西可以根据不同的情况自己修改，方便大家 方便你我他！
前端实现antd文本域限制字数
。
08-08 3580
前端实现简单的文本域字数限制
antDesign中表格组件必填验证
weixin_73610394的博客
05-21 240
验证实现效果。
react antd TextArea 中文输入法 autoSize
HackerDreamer_BSD的博客
05-19 1004
autoSize 引起的 textArea的中文输入问题
input,textarea限制字数,实时绑定
大山博客
06-08 2042
目前常用二种方法 1.在input 或 textarea中加属性 maxlength="10" 2.js判断 function limitImport(str,num){ $(document).on('input propertychange',str,function(){ var self = $(this); var content = s...
JavaScript获取,设置光标位置,兼容InputTextArea
12-21
在JavaScript编程中，获取和设置光标位置是常见的需求，特别是在与用户交互的表单元素如`<input>`和`<textarea>`中。这涉及到DOM（文档对象模型）操作和事件处理，对于创建动态和响应式的网页应用至关重要。本文将...
antd textArea无法初始化默认值 defaultValue
广兰路地铁的博客
03-21 5021
本人在开发过程中遇到这样一个问题，打算通过useEffect来初始化表单的默认值，这里使用的是react下的hooks Api,但是textArea的初始值始终无法设置成功： import React, { useState, useEffect, useRef } from 'react'; // 文本框默认内容 const [textAreaContent, setText] = useS...
Vue实现动态显示textarea剩余字数
08-30
在Vue.js框架中，动态显示textarea的剩余字数是一个常见的需求，这可以帮助用户实时了解他们的输入是否超过了预设的字符限制。以下是如何在Vue中实现这一功能的详细步骤。 首先，我们需要在HTML模板中设置一个`...
antd TextArea json string
最新发布
07-30
我们正在使用Ant Design的TextArea组件来编辑JSON字符串。主要思路是： 1. 使用TextArea作为JSON字符串的输入和显示。 2. 提供格式化（美化）和压缩（去除多余空格）的功能。 3. 在用户输入时进行实时校验，如果...
js实现textarea限制输入字数
12-09
实现textarea限制输入字数（包含中文只能输入10个，全ASCII码能够输入20个） textarea称文本域，又称文本区，即有滚动条的多行文本输入控件，在网页的提交表单中经常用到。与单行文本框text控件不同，它不能通过maxlength属性来限制字数，为此必须寻求其他方法来加以限制以达到预设的需求。 通常的做法就是使用#脚本语言来实现对textarea文本域的字数输入限制，简单而实用。假设我们有一个id为 txta1 的textarea文本区，我们可以通过以下代码限制它的键盘输入字数为10个字（汉字或其他小角字符）： ＜script language="#" type="text/e
AntD选择器Select模糊搜索，限制个数、字符长度、显示个数
莉兹Liz的博客
12-21 7295
需求 AntD选择器Select模糊搜索，最多选5个，最长字符6个，多余省略号显示，选择超过1个第二个+n显示。 代码 import React from 'react'; import ReactDOM from 'react-dom'; import 'antd/dist/antd.css'; import './index.css'; import { Select } from 'antd'; const { Option } = Select; const children = []; for
antd 组件Input 输入按字节限制长度（汉字占2个字节，字母1个字节）
Haines
04-22 3682
文案上限为20个字符（10个汉字）”产品需求一个小括号，开发实现一下子复杂了很多。 /** 用户名校验 */ const nameValidator = (rule, value, callback) => { let len = 0; for (let i = 0; i < value.length; i++) { if (value.charCodeAt(i) > 127 || value.charCodeAt(i) == 9
TextArea控件的最大长度问题
yinxu的专栏
12-16 1021
//到达最大长度之后通过输入法输入的解决方法不是很好//其它如：拷贝、直接输入等都解决的不错 var Inputs = {        DisableInput: function(event) {        if(System.isIE)          event.returnValue = false;        else          e
textarea输入框在移动端换行符不计算长度问题，即时检测输入框的字数
weixin_34413357的博客
03-21 841
应用场景：微信端textarea标签的使用，下图：第二张图片在换行后长度为149，元素属性maxlength="150",但是却输入不了了， 代码： 　　　　　　　$('.textarea_box textarea').on("keyup",function(e){ $(this).autosize(); $('.te...
踩坑，AntD Textarea 去掉右下角图标，去掉滚动轴
weixin_43822134的博客
12-09 5494
AntD Textarea 去掉右下角图标，去掉滚动轴
对antd的Input/TextArea进行一层封装，限制用户输入长度，并实时显示用户输入的长度
weixin_43654374的博客
04-17 5094
原因 标题antd好像没实现这个功能，suffix属性在TextArea中不起作用，想了一下，反正是个小功能，就自己随便做了一下，其实很简单 ，就是写个标签然后定位到TextArea屁股后面就行了。 代码 const suffixStyle= { position:'relative'; left:'-50px'; user-select:'none'; } <div&g...
textarea 字体限制，超出部分不显示并及时显示还剩字体个数
weixin_30263277的博客
12-06 342
1）HTML <textarea class="box" ></textarea > 2)JQ: $(function(){ 　　　　$(".box").bind("input propertychange",function(){ 　　　　　　var len=$(this).val().length; 　　　　　　var nowLen=1...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值