textarea下方记录0/50,样式兼容

在支付宝小程序,使用textarea maxlength="50",无需再额外定义下方0/50的样式,自动就有。

 在微信小程序、H5(app没有试),使用textarea maxlength="50",下方还是需要自己写一个0/50的样式。

为了兼容各端,可以这样写:

效果:

html:

<textarea
                        class="textarea"
                        placeholder-style="font-size: 22rpx; color: #999999;"
                        placeholder="给快递员捎句话吧"
                        :data-maxnum="(form.remark ? form.remark.length : 0) + '/20'"
                        v-model="form.remark"
                    />

css:

.textarea {
                    width: 100%;
                    height: 100%;
                    font-size: 22rpx;
                    background: #F4F4F4;
                    
                    &:after{
                        content: attr(data-maxnum);
                        position: absolute;
                        right: 0;
                        bottom: 0;
                        font-size: 22rpx;
                        color: #999999;
                    }
                }

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值