微信小程序代码实现一个文本框可以自动换行编辑文本框的样式大小
在微信小程序中,可以使用<textarea>标签来实现一个文本框,并设置auto-height属性来实现自动换行。同时,可以通过CSS样式来编辑文本框的样式大小。
以下是一个示例代码:
<!--index.wxml-->
<view class="container">
<textarea class="text-area" auto-height placeholder="请输入文本" bindinput="handleInput"></textarea>
</view>
/*index.wxss*/
.container {
width: 100%;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.text-area {
width: 80%;
height: 200rpx;
border: 1rpx solid #ccc;
padding: 10rpx;
font-size: 28rpx;
}
//index.js
Page({
handleInput(event) {
console.log(event.detail.value); // 输出输入的文本内容
}
})
在上述代码中,我们使用了<textarea>标签来创建一个文本框,并设置了auto-height属性,使其可以自动换行。通过CSS样式,我们设置了文本框的大小、边框样式、内边距和字体大小。
在JavaScript代码中,我们绑定了bindinput事件,当文本框的内容发生变化时,会触发该事件,通过event.detail.value可以获取到输入的文本内容。
你可以根据具体需求修改CSS样式,来满足你的样式大小要求
原文地址: http://www.cveoy.top/t/topic/h9GW 著作权归作者所有。请勿转载和采集!