如图
wxml 和 wxss只是布局 看js逻辑
<view class='input'>
<text class='input-left'>标题</text>
<input name='' value='' placeholder='请输入' bindinput='length'></input>
<text class='input-right'>{{length}}/30</text>
</view>
.input{
width: 100%;
border-bottom: 1rpx solid #efefef;
height: 88rpx;
border-top: 1rpx solid #efefef;
display: flex;
justify-content: space-between;
align-items: center;
}
.input-left{
margin-left: 25rpx;
font-size: 30rpx;
}
.input-right{
margin-right: 25rpx;
font-size: 30rpx;
}
input{
font-size: 30rpx;
width: 500rpx;
}
js
Page({
/**
* 页面的初始数据
*/
data: {
length: 0
},
length(e) {
let length = e.detail.value.length
// console.log(length)
this.setData({
length: length
})
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function(options) {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function() {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function() {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function() {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function() {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function() {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function() {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function() {
}
})