文本域限制输入字数以及显示已输入的字数往往最常见,话不多说,为了提供方便,已经悄悄将textarea的属性从官网上复制下来了,可供伙伴们参考:
简单的显示一下做出的功能,样式需要你们自己根据所需改变哦!
如此简单,上代码吧!
<template>
<view>
<view class="uni-textarea">
<textarea placeholder-style="color:#A6A6A6" placeholder="请输入!" :maxlength="maxNum"
@input="GetNumber" />
<view class="text-count">{{inputNum}}/{{maxNum}}</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
maxNum:30, //最多输入字数
inputNum:0 //已输入的字数
}
},
methods: {
GetNumber(e) {
console.log(e)
this.inputNum = e.detail.cursor;
},
}
}
</script>
<style lang="scss">
.uni-textarea {
width: 654rpx;
height: 200rpx;
background: #F1F3F7;
border-radius: 16rpx;
margin: 0 auto;
.text-count {
font-size: 24rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #A6A6A6;
text-align: right;
margin-right: 20rpx;
}
uni-textarea {
width: 100%;
height: 160rpx;
box-sizing: border-box;
padding: 20rpx 24rpx 0 20rpx;
font-size: 28rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #A6A6A6;
line-height: 40rpx;
}
}
</style>
我们可以通过@input事件来监听输入的字数,打印e就很简单明了了,当然如果需要展示的是还剩余多少字可输入的话,自己进行加减就好啦,就不多介绍了, 是不是还挺简单的,希望可以帮助你们!