Textarea 多行文本框


多行文本输入框,可控制是否显示当前字数,可自定义高度。

使用指南

在 Taro 文件中引入组件

  1. import { AtTextarea } from 'taro-ui'

组件依赖的样式文件(仅按需引用时需要)

  1. @import "~taro-ui/dist/style/components/textarea.scss";

一般用法

说明:

  • 该组件为受控组件,开发者需要通过 onChange 事件来更新 value 值变化,value 与 onChange 函数必填

  • 由于小程序组件化的限制,AtTextarea 嵌套在 AtForm 或原生小程序组件 Form 中的时候,onSubmit 事件获得的 event 中的 event.detail.value 始终为空对象,开发者要获取数据,可以自行在页面的 state 中获取

  • 由于此组件是基于小程序的 Textarea 进行封装,该组件是原生组件,使用前请阅读使用限制

  1. import Taro from '@tarojs/taro'
    import { AtTextarea } from 'taro-ui'
    export default class Index extends Taro.Component {
    constructor () {
    super(...arguments)
    this.state = {
    value: ''
    }
    }
    handleChange (event) {
    this.setState({
    value: event.target.value
    })
    }
    render () {
    return (
    <AtTextarea
    value={this.state.value}
    onChange={this.handleChange.bind(this)}
    maxLength={200}
    placeholder='你的问题是...'
    />
    )
    }
    }

不显示字数

  1. <AtTextarea
    count={false}
    value={this.state.value}
    onChange={this.handleChange.bind(this)}
    maxLength={200}
    placeholder='你的问题是...'
    />

参数

参数微信小程序h5说明类型可选值默认值
value输入框当前值,用户需要通过 onChange 事件的 event.target.value 来更新 value 值,必填String--
maxLength最大长度Number-200
placeholder占位符String--
placeholderStylex指定 placeholder 的样式,只在小程序有效String--
placeholderClassx指定 placeholder 的样式类,只在小程序有效String--
disabled是否禁用String-false
autoFocus是否自动聚焦Boolean-false
focusx获取焦点Boolean-false
showConfirmBarx是否显示键盘上方带有” 完成 “按钮那一栏Boolean-false
selectionStartx光标起始位置,自动聚集时有效,需与 selection-end 搭配使用Number--1
selectionEndx光标结束位置,自动聚集时有效,需与 selectionStart 搭配使用Number--1
count是否显示字数Boolean-true
fixed如果 textarea 是在一个 position:fixed 的区域,需要显示指定属性 fixed 为 trueBoolean-false
textOverflowForbidden文字超出最大长度时是否禁止输入,若否,则还可以在 maxLength 的基础上输入500字符,并右下角红字提示Boolean-true
height输入框高度Number-100
cursorSpacingx指定光标与键盘的距离,单位 px 。取 input 距离底部的距离和 cursor-spacing 指定的距离的最小值作为光标与键盘的距离,只在小程序端有效,目前安卓端微信官方有 bug,该特性失效Number-100

事件

事件名称微信小程序h5说明返回参数
onChange输入框值改变时触发的事件,开发者需要通过 onChange 事件的 event.target.value 来更新 value 值变化,onChange 函数必填event
onFocus输入框获得焦点时触发,event.detail = {value, height} ,height 为键盘高度,在基础库 1.9.90 起支持event
onBlur输入框失去焦点时触发,event.detail = { value, cursor }event
onConfirmx点击完成时,触发 confirm 事件,event.detail = { value: value }event
onLinechangex输入框行数变化时调用,event.detail = { height: 0, heightRpx: 0, lineCount: 0 }event

Textarea多行文本框 - 图1