Vue2版本的antdv给textArea添加限制输入长度，并实时显示已输入字数

最新推荐文章于 2024-04-30 13:43:08 发布

vivi____

最新推荐文章于 2024-04-30 13:43:08 发布

阅读量3.7k

点赞数 3

分类专栏：前端开发文章标签：前端 javascript 开发语言 vue.js

本文链接：https://blog.csdn.net/vivi____/article/details/127845746

版权

前端开发专栏收录该内容

3 篇文章 0 订阅

订阅专栏

textArea本身是input组件，其实是用到了Input组件当中的maxLength这个api

<a-textarea 
	v-model="remark"
	placeholder="请输入备注" 
	:auto-size="{ minRows: 4, maxRows: 6 }"
	:maxLength = "100" 
/>

给textArea添加下标，实时显示

<span style="position: relative;left: 250px;user-select: none;z-index: 999;top: -10px;">{{remark.length}}/100</span>

最终效果

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

vivi____

关注关注

3
点赞
踩
6

收藏

觉得还不错? 一键收藏
打赏
1
评论
Vue2版本的antdv给textArea添加限制输入长度，并实时显示已输入字数

Vue2版本的antdv给textArea添加限制输入长度，并实时显示已输入字数
复制链接

扫一扫

专栏目录

textarea长度限制

04-08

NULL 博文链接：https://zhouchaofei2010.iteye.com/blog/1606629

实现textarea限制输入字数(包含中文只能输入10个,全ASCII码能够输入20个)

JiKeYzhang's

12-16

2987

onkeydown="textCounter(this, 1000);" onkeyup="textCounter(this, 1000);" /** * format chargeType.comments length * @param field - this Object * @param maxlimit - max length in this field *

1 条评论您还未登录，请先登录后发表或查看评论

【antd + vue】InputNumber 数字输入框输入限制

最新发布

m0_65041204的博客

04-30

968

表格行可输入，InputNumber 数字输入框输入限制使用precision时，超出规定小数位数时会自动四舍五入

如何限制TEXTAREA控件的输入数据长度

楠

11-21

1135

下面的代码可以参考一下: 一我们知道文本框可以有一个为maxlength的属性，可以限制文本框的长度，当时备注框textarea却没有，那么要怎样限制备注框的长度呢？其实很简单，只有加上想这样一句话onKeyDown='if (this.value.length>=20){event.returnValue=false}' 就可以了，整个写法如下： =20){event.return

Textarea限制输入内容长度

mie_999的专栏

01-29

670

function checkMaxLength(obj,max){ if(obj.value.length > max) { alert("输入内容长度超出限制！"); obj.value = obj.value.substring(0,max); } } onpropertychange="checkMaxLength(thi

给textarea增加长度限制的几种方法

编程手札

05-28

1万+

最简单的：=20){event.returnValue=false}>aaaa简单有效，但问题是输入20个字符后边删除键、光标键通通失效，未够20个字符时粘贴一段长文字也可以突破限制。最粗暴的： function isMaxLen(o){ var nMaxLen=o.getAttribute? parseInt(o.getAttribute("maxlength")):"

Vue实现textarea固定输入行数与添加下划线样式的思路详解

01-19

先上效果图### ...需求:用户固定不论多少字节,只能输入2行. 因为是限制行数,所以不能用maxlength设置. 实现思路首先想到计算出用户输入了几行,然后超出部分字符删除掉就OK. <textarea class='

Vue实现动态显示textarea剩余字数

08-30

主要为大家详细介绍了Vue实现动态显示textarea剩余文字数量，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

vue:el-input输入时限制输入的类型操作

10-15

主要介绍了vue:el-input输入时限制输入的类型操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧

Textarea输入字数限制实例(兼容iOS&安卓)

12-11

最近在做一个微信公众号的页面，其中有对textarea做输入字数限制，而且需要兼容iOS和安卓手机，下面直接贴代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <...

textarea标签实现右下角展示限制字数及当前字数

wsy52521的专栏

05-09

3002

这样写很有可能出现输入时输入信息与限制信息重合的情况，所有需要在外层加入div标签设置高度为100px，textarea标签高度为84px，span标签top值设置为-5，文字大小设置为12px。这样设置测试过火狐，谷歌，ie，edge兼容性都很好。查了好久，基本都是直接在textarea标签下写一个span标签。

2022-07-25 工作记录--React/JS-input输入框 / textarea文本框输入字数限制以及字数显示

weixin_48850734的博客

07-25

4012

React/JS-textarea文本框输入字数限制以及字数显示

前端实现antd文本域限制字数

under taker

08-08

2865

前端实现简单的文本域字数限制

JS textarea文本框输入字数限制以及字数显示

m0_46364033的博客

03-17

6937

大致实现的效果如下：（其中样式自行调整） html代码： // 设置字数限制为100，显示行数为5行 <div> <textarea name="" id="licenseText" rows="5" maxlength="100" placeholder="选填"></textarea> <div><span id="textCount">0</span>/100</div> </div> JS代码：

Vue a-textarea输入框更改宽度，且要整个div根据输入框的变化而变化，禁用

weixin_48907405的博客

07-10

1110

CSS样式输入框变化，但是下方div没有动，其实是因为ant组件中的div没有随着动，所以没有变化。根据是详情还是修改控制是否禁用。

textarea中限制输入长度

热门推荐

army27的专栏

11-03

1万+

要在textarea中限制输入字符的长度，比如在twitter中要限制字符为140个，可实现的方法有： 1. <textarea name="A" cols="45" rows="2" onKeyDown=if(this.value.length>=20){event.returnValue=false}>aaaa　　 2. 我们也可以将判断写在

vue项目富文本编辑器输入格式化以计算总字数

LIMITSSS的博客

05-16

1087

在使用富文本编辑器时，v-model存储输入信息，此时输入信息会包含html格式，影响字数计算另外特殊字符比如< > &也需要格式化还有空格不能计算为字数所以需要对输入信息进行格式化 data() { return { title: "", tap: "", content: "", fontCount: 0, //总字数 }; }, watch: { //监听正文内容变化以改变总字.

antd vue 1.7.8版本使用表单输入框显示输入字数

__猫玖__的博客

07-27

653

在a-input标签下面加入一个sapn标签，并设置css样式定位。

vue实时显示textarea字数_Vue 实时显示输入的字数

05-26

可以通过监听textarea的input事件来实现实时显示输入的字数，然后将字数绑定到Vue实例的一个变量上，再在页面中显示出来。以下是一个示例代码： ```html <template> <div> <textarea @input="onInput"></textarea> <p>已输入{{textLength}}个字</p> </div> </template> <script> export default { data() { return { textLength: 0, }; }, methods: { onInput(event) { this.textLength = event.target.value.length; }, }, }; </script> ``` 在上面的代码中，我们监听了textarea的input事件，并在事件处理函数中更新了textLength变量的值，然后将其显示在页面上。这样就可以实现实时显示输入的字数了。

“相关推荐”对你有帮助么？

非常没帮助
没帮助
一般
有帮助
非常有帮助

提交