input 多行文本框
时间: 2024-01-18 11:03:38 浏览: 85
可以使用`<textarea>`标签来创建多行文本框,也可以使用`<input>`标签的`type`属性设置为`textarea`来创建多行文本框。下面是一个使用`<textarea>`标签创建多行文本框的例子:
```html
<textarea rows="4" cols="50">
在这里输入文本...
</textarea>
```
其中`rows`属性设置文本框的行数,`cols`属性设置文本框的列数。
如果使用`<input>`标签的`type`属性设置为`textarea`来创建多行文本框,可以使用`resize`属性设置文本框是否可调整大小,使用`v-model`绑定数据,使用`:autosize`属性设置文本框的自动调整大小的最小行数和最大行数。下面是一个使用`<input>`标签创建多行文本框的例子:
```html
<el-input type="textarea" resize="none" :autosize="{ minRows: 4, maxRows: 4 }" placeholder="请输入意见" v-model="shyj"></el-input>
```
其中`:autosize="{ minRows: 4, maxRows: 4 }"`表示设置文本框的自动调整大小的最小行数和最大行数都为4行。
相关问题
微信小程序写以下程序,主页面中包含一个多行文本框和一个页面跳转按钮,如果多行文本框为空,且页面跳转未传值过来则显示默认字体,如果多行文本框未输入值,但页面跳转按钮传值过来了则多行文本框显示页面传递过来的值,如果多行文本框有值且页面传值了则显示多行文本框中的值
好的,以下是微信小程序的代码实现:
主页面 wxml 文件:
```
<view class="container">
<textarea value="{{textValue}}" bindinput="onInput"></textarea>
<button class="btn" bindtap="navigateTo">页面跳转</button>
</view>
```
主页面 js 文件:
```
Page({
data: {
textValue: ''
},
onInput: function (event) {
this.setData({
textValue: event.detail.value
})
},
navigateTo: function () {
wx.navigateTo({
url: '/pages/second/second?textValue=' + this.data.textValue
})
},
onLoad: function (options) {
if (options.textValue) {
this.setData({
textValue: options.textValue
})
} else if (!this.data.textValue) {
this.setData({
textValue: '默认字体'
})
}
}
})
```
第二个页面 wxml 文件:
```
<view class="container">
<text>{{textValue}}</text>
</view>
```
第二个页面 js 文件:
```
Page({
data: {
textValue: ''
},
onLoad: function (options) {
if (options.textValue) {
this.setData({
textValue: options.textValue
})
} else {
this.setData({
textValue: '多行文本框为空'
})
}
}
})
```
在主页面中,我们先绑定了一个多行文本框和一个按钮。当用户在多行文本框中输入时,我们通过 `bindinput` 事件来监听输入内容,并将输入的内容保存在 `textValue` 变量中。当用户点击页面跳转按钮时,我们使用 `wx.navigateTo` 来跳转到第二个页面,并将 `textValue` 的值传递过去。
在第二个页面中,我们通过 `onLoad` 事件来获取传递过来的值,并根据传递过来的值来设置 `textValue` 的值。如果页面跳转时没有传递 `textValue` 的值,则将 `textValue` 的值设置为“多行文本框为空”。
当用户在主页面中没有输入任何内容并且页面跳转也没有传递 `textValue` 的值时,我们将 `textValue` 的值设置为“默认字体”。
以上就是实现多行文本框显示不同内容的微信小程序的代码。
微信小程序写以下代码;1.页面包含一个多行文本框,一个参数按钮。2.当多行文本框中无值且接受按钮无参数传回,则不显示任何。2.如果多行文本框中无参数但是接收按钮有参数,则在多行文本框中显示接收按钮的参数。3.如果多行文本框有参数则显示该参数
以下是微信小程序的代码实现,包含一个多行文本框和一个按钮:
```html
<view class="container">
<textarea class="input" bindinput="onInput">{{inputValue}}</textarea>
<button class="btn" bindtap="onTap">{{btnValue}}</button>
</view>
```
在对应的JS文件中,我们需要定义多个变量来控制页面的显示:
```javascript
Page({
data: {
inputValue: '', // 多行文本框中的值
btnValue: '', // 按钮传递的参数
displayInput: false // 是否显示多行文本框
},
// 监听多行文本框输入事件
onInput: function(e) {
// 更新多行文本框中的值
this.setData({
inputValue: e.detail.value,
displayInput: true // 显示多行文本框
});
},
// 监听按钮点击事件
onTap: function() {
// 如果多行文本框有值,则显示该值
if (this.data.inputValue) {
wx.showToast({
title: this.data.inputValue,
icon: 'none'
});
} else if (this.data.btnValue) { // 如果多行文本框没有值但是按钮有参数,则显示该参数
wx.showToast({
title: this.data.btnValue,
icon: 'none'
});
} else { // 如果多行文本框和按钮都没有参数,则不显示任何信息
this.setData({
displayInput: false
});
}
}
});
```
在CSS文件中,可以设置多行文本框和按钮的样式:
```css
.container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
}
.input {
width: 80%;
height: 150rpx;
margin-bottom: 20rpx;
padding: 20rpx;
border: 1rpx solid #ccc;
border-radius: 5rpx;
font-size: 28rpx;
}
.btn {
width: 200rpx;
height: 80rpx;
border-radius: 5rpx;
background-color: #4caf50;
color: #fff;
font-size: 32rpx;
}
```