html多行文本框代码

HTML中的多行文本框，也称为`<textarea>`元素，用于让用户输入多行文本。其基本语法如下：

<textarea rows="n" cols="m" [其他属性] [(ngModel)]="variableName">默认文本</textarea>

- `rows`: 定义文本框的行数，默认值可以根据需要设置。
- `cols`: 定义文本框的列数，同样可以自定义。
- `[其他属性]`：如`placeholder` (提示文字)、`required` (是否必填)、`disabled` (是否禁用)等，可根据需求添加。
- `[(ngModel)]`: Angular 2+中的双向数据绑定，`variableName`是与组件内变量关联的数据绑定。

例如，创建一个允许用户最多输入50字符的文本框，并在提交按钮点击时显示内容：

<textarea rows="4" cols="50" placeholder="请输入多行文本" [(ngModel)]="multiLineText"></textarea>
<button (click)="submit()">提交</button>

<p>您输入的内容: {{ multiLineText }}</p>

相关问题

微信小程序写以下代码;1.页面包含一个多行文本框，一个参数按钮。2.当多行文本框中无值且接受按钮无参数传回，则不显示任何。2.如果多行文本框中无参数但是接收按钮有参数，则在多行文本框中显示接收按钮的参数。3.如果多行文本框有参数则显示该参数

以下是微信小程序的代码实现，包含一个多行文本框和一个按钮：

<view class="container">
  <textarea class="input" bindinput="onInput">{{inputValue}}</textarea>
  <button class="btn" bindtap="onTap">{{btnValue}}</button>
</view>

在对应的JS文件中，我们需要定义多个变量来控制页面的显示：

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文件中，可以设置多行文本框和按钮的样式：

.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;
}

微信小程序写以下程序： 1.创建两个页面，主页面和菜单页面。 2.主页面中有一个多行文本框和页面跳转按钮。 3.点击页面跳转按钮可以跳转至菜单页面。 4.在菜单页面进行商品选择，并将选择的商品放在微信缓存中传递给主页面。 5.如果多行文本框中没有参数而微信缓存有菜单页面传递过来的内容则在多行文本框中显示该内容。

下面是微信小程序的代码实现：

1.在 app.json 文件中配置两个页面：

{
  "pages": [
    "pages/index/index",
    "pages/menu/menu"
  ],
  "window": {}
}

2.在主页面（pages/index/index）中添加一个多行文本框和一个跳转按钮：

<view class="container">
  <textarea bindinput="onInput" placeholder="请输入参数"></textarea>
  <button bindtap="goToMenu">跳转至菜单</button>
</view>

3.在主页面的 js 文件中，定义跳转至菜单页面的函数：

Page({
  goToMenu() {
    wx.navigateTo({
      url: '/pages/menu/menu',
    })
  },

  // ...
})

4.在菜单页面（pages/menu/menu）中添加商品列表和确认按钮：

<view class="container">
  <view class="list">
    <view class="item" wx:for="{{products}}" wx:key="id" bindtap="selectProduct">
      <checkbox value="{{item}}" checked="{{item.checked}}">{{item.name}}</checkbox>
    </view>
  </view>
  <button bindtap="confirm">确认</button>
</view>

5.在菜单页面的 js 文件中，定义商品列表和确认函数，并将选择的商品存入微信缓存：

Page({
  data: {
    products: [
      { id: 1, name: '商品1', checked: false },
      { id: 2, name: '商品2', checked: false },
      { id: 3, name: '商品3', checked: false },
    ],
  },

  selectProduct(e) {
    const index = e.currentTarget.dataset.index
    const products = this.data.products
    products[index].checked = !products[index].checked
    this.setData({ products })
  },

  confirm() {
    const selectedProducts = this.data.products.filter(p => p.checked).map(p => p.name)
    wx.setStorageSync('selectedProducts', selectedProducts)
    wx.navigateBack()
  },
})

6.在主页面的 js 文件中，定义多行文本框输入事件和获取微信缓存的函数，并在页面加载时判断是否有传递过来的参数：

Page({
  onInput(e) {
    const value = e.detail.value
    this.setData({ value })
  },

  onLoad() {
    const selectedProducts = wx.getStorageSync('selectedProducts')
    if (selectedProducts && !this.data.value) {
      this.setData({ value: selectedProducts.join('\n') })
    }
  },

  // ...
})

至此，一个简单的微信小程序就完成了。用户可以在主页面输入参数，然后跳转至菜单页面进行商品选择，选择完成后将选择的商品存入微信缓存并返回主页面，主页面会自动判断是否有传递过来的商品并显示在多行文本框中。