vue 输入框显示输入字数

本文介绍了两种在Vue中显示输入框(type='textarea'和type='text')内、外文本长度的方法,通过`maxlength`属性限制输入,并使用`show-word-limit`展示剩余字数。示例代码展示了如何在输入框外以及输入框内实时显示输入文本的长度,帮助用户了解输入状态。
摘要由CSDN通过智能技术生成

1.在输入框外显示输入文本长度

  备注:<i-input type="textarea" v-model="notes" maxlength="120" style="width:1100px" :autosize="{minRows: 2}"/>
          <div style="float: right">  {{notes.length}}/120</div>

效果图:
在这里插入图片描述2.在输入框内显示输入文本长度
在输入框内显示文本长度,仅仅需要添加一个属性:show-word-limit

  备注:<i-input type="textarea" v-model="notes" maxlength="120" style="width:1100px" :autosize="{minRows: 2}" show-word-limit/>

效果图:
在这里插入图片描述
注:
type="textarea"与type="text"的区别

type=“text”:
此时,Input框为单文本输入框,不支持多行输入,不会换行
type=“textarea”
此时,Input框为多行输入框,文本区可容纳无限量文本

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值