开发
API

textarea

基础库 1.0.0 开始支持本组件。

多行文本输入框。

属性说明

属性名类型默认值必填说明最低支持版本
valueString--输入框的内容1.0.0
placeholderString--输入框为空时占位符1.0.0
placeholder-styleString--指定 placeholder 的样式1.0.0
disabledBooleanfalse是否禁用1.0.0
maxlengthNumber140最大输入长度,设置为 -1 的时候不限制最大长度1.0.0
focusBooleanfalse是否获得焦点1.0.0
auto-heightBooleanfalse是否自动增高,设置 auto-height 时,设置 height 样式不生效1.0.0
fixedBooleanfalse是否固定位置,如果设置了 css 样式position:fixed,需要将改属性设置为 true1.0.0
cursor-spacingNumber0指定软键盘弹出时,与光标的距离是多少,单位是 px1.0.0
cursorNumber-1指定 focus 时的光标位置1.0.0
selection-startNumber-1指定 focus 时选中片段的起始位置1.0.0
selection-endNumber-1指定 focus 时选中片段的结束位置1.0.0
bindinputEventHandler--键盘输入时触发,e.detail={value, cursor}1.0.0
bindfocusEventHandler--输入框聚焦时触发,event.detail={value,height},height 是软键盘的高度1.0.0
bindblurEventHandler--输入框失去焦点时触发,event.detail={value}1.0.0
bindconfirmEventHandler--用户点击键盘的完成按钮时触发,event.detail={value}1.0.0

代码示例

开发者工具中预览

<textarea
  bindfocus="onTextFocus"
  bindblur="onTextBlur"
  bindinput="onTextInput"
  bindconfirm="onTextConfirm"
  placeholder="请输入"
/>

<text>用户输入:{{value}}</text>
Page({
  data: {
    value: "",
  },
  onTextFocus: function (e) {
    console.log(e);
  },
  onTextBlur: function (e) {
    console.log(e);
  },
  onTextInput: function (e) {
    this.setData({
      value: e.detail.value,
    });
  },
  onTextConfirm: function (e) {
    tt.showToast({ title: "confirm" });
  },
});

Bug & Tip

  • Tip:请勿在 <scroll-view><swiper><picker-view> 中使用 <textarea> 组件。
  • Tip:css 动画对 <textarea> 组件无效。
  • Tip:如果样式上设置为 fixed 元素,请在组件上添加fixed 属性。
  • Tip:<textarea>blur 事件会晚于页面上的tap 事件,如果需要在 <button> 的点击事件获取 <textarea>,可以使用<form>bindsubmit
  • Bug:当在 <textarea>外面包裹一个元素且设置有背景值颜色时,在 Android 手机上背景颜色是不能在<textarea>上生效的。此处可以通过直接在 <textarea> 上设置与包裹元素相同的背景颜色解决。
点击纠错
评价此篇文档