• 下载
  • 社区

textarea 多行输入框

多行输入框,可输入多行内容。

说明:无法通过 textarea 获取键盘高度。

扫码体验

img.jpg

效果示例

textarea.png

示例代码

<!-- API-DEMO page/component/textarea/textarea.axml -->
<view class="page">
  <view class="page-description">文本框</view>
  <view class="page-section">
    <view class="page-section-title">受控聚焦</view>
    <view class="page-section-demo">
      <textarea focus="{{focus}}" onFocus="onFocus" onBlur="onBlur" placeholder="Please input something" />
    </view>
    <view class="page-section-btns">
      <button type="default" size="mini" onTap="bindButtonTap">聚焦</button>
    </view>
  </view>
  <view class="page-section">
    <view class="page-section-title">自适应高度</view>
    <view class="page-section-demo">
      <textarea onBlur="bindTextAreaBlur" auto-height placeholder="Please input something" />
    </view>
  </view>

  <view class="page-section">
    <view class="page-section-title">结合表单</view>
    <form onSubmit="bindFormSubmit">
      <view class="page-section-demo">
        <textarea name="textarea" placeholder="Please input something"  />
      </view>
      <view class="page-section-btns">
        <button form-type="submit" size="mini" type="primary">提交</button>
      </view>  
    </form>
  </view>
</view>
// API-DEMO page/component/textarea/textarea.js
Page({
  data: {
    height: 20,
    focus: false,
  },
  bindButtonTap() {
    this.onFocus();
  },
  onFocus() {
    this.setData({
      focus: true,
    });
  },
  onBlur() {
    this.setData({
      focus: false,
    });
  },

  bindTextAreaBlur(e) {
    console.log(e.detail.value);
  },
  bindFormSubmit(e) {
    my.alert({
      content: e.detail.value.textarea,
    });
  },
});

属性

属性 类型 默认值 描述 最低版本
name String - 组件名字,用于表单提交获取数据 -
value String - 初始内容 -
placeholder String - 占位符 -
placeholder-style String - 指定 placeholder 的样式 1.6.0
placeholder-class String - 指定 placeholder 的样式类 1.6.0
disabled Boolean false 是否禁用 -
maxlength Number 140 最大长度,当设置为-1时不限制最大长度 -
focus Boolean false 获取焦点 -
auto-height Boolean false 是否自动增高 -
show-count Boolean true 是否渲染字数统计功能(是否删除默认计数器/是否显示字数统计 1.8.0
controlled Boolean false 是否为受控组件。为 true 时,value 内容会完全受 setData 控制 1.8.0
onInput EventHandle - 键盘输入时触发,event.detail = {value: value},可以直接 return 一个字符串以替换输入框的内容 -
onFocus EventHandle - 输入框聚焦时触发 event.detail = {value: value} -
onBlur EventHandle - 输入框失去焦点时触发,event.detail = {value: value} -
onConfirm EventHandle - 点击完成时触发,event.detail = {value: value} -

常见问题

如何隐藏 textarea 唤起的键盘?

可以使用 my.hideKeyboard 隐藏键盘。

为何安卓系统下 textarea 获取焦点的时候,文字会消失?

可加上 enableNative="{{false}}" 。

textarea 弹出键盘后内容被顶上去,如何避免?

可以在 input 组件中加上 enableNative="{{false}}"。

为何 textarea 通过 setData 清空数据不生效?

需要添加属性 controlled="{{true}}" 表示 value 内容会完全受 setData 控制。