小程序實現輸入框隨著輸入字體高度變化的方法：1.創建微信小程序項目；2.在index.wxml文件中添加頁面設計代碼；3.在index.wxss文件中添加輸入框樣式代碼；4.在index.js文件中添加效果實現代碼；5.保存編輯的代碼并進行調試即可。
具體操作步驟如下：
1、首先在創建一個微信小程序項目。
2、在pages包下的index目錄中index.wxml文件里添加頁面設計代碼，使用<button>來實現一個簡單的輸入框。
<view class="text-box"><text>{{currentInput}}</text>
<textarea class="weui-textarea" placeholder="請輸入文本" bindinput="getInput" maxlength="1000" />
</view>
3、在pages包下的index目錄中index.wxss文件里添加輸入框樣式代碼。
.text-box { width: 100%;
position: relative;
min-height: 80rpx;
margin-top: 17rpx;
margin-left: 17rpx;
}
.text-box text {
display: block;
visibility: hidden;/*元素不可見*/
word-break: break-all;
word-wrap: break-word;
}
.text-box .weui-textarea {
height: 100%;
position: absolute;
left: 0;
top: 0;
overflow-y: hidden;
word-break: break-all;/*換行*/
word-wrap: break-word;/*換行*/
border: 1rpx solid black;
}
4、再通過pages包下的index目錄中index.js文件添加交互代碼來實現輸入框隨著輸入字體高度變化的效果。
Page({ data: {
currentInput: ''
},
getInput: function (e) {
this.setData({
currentInput: e.detail.value
})
}
})
5、最后保存編輯的代碼進行調試，保存快捷鍵【Ctrl+S】。
在開發工具左側即可看到設計效果，輸入文字前的效果：
輸入文字之后的效果，如果隨著輸入框隨著輸入字體高度變化，說明設置成功。
