Textarea

多行输入框。该组件是原生组件,使用时请注意相关限制

参考文档

类型

  1. ComponentType<TextareaProps>

示例代码

  • React
  • Vue
  1. export default class PageView extends Component {
  2. constructor() {
  3. super(...arguments)
  4. }
  5. render() {
  6. return (
  7. <View className='components-page'>
  8. <Text>输入区域高度自适应,不会出现滚动条</Text>
  9. <Textarea style='background:#fff;width:100%;min-height:80px;padding:0 30rpx;' autoHeight/>
  10. <Text>这是一个可以自动聚焦的 textarea</Text>
  11. <Textarea style='background:#fff;width:100%;height:80px;padding:0 30rpx;' autoFocus/>
  12. </View>
  13. )
  14. }
  15. }
  1. <template>
  2. <view class="components-page">
  3. <text>输入区域高度自适应,不会出现滚动条</text>
  4. <textarea style="background:#efefef;width:100%;min-height:80px;padding:0 30rpx;" :auto-height="true" />
  5. <text>这是一个可以自动聚焦的 textarea</text>
  6. <textarea style="background:#efefef;width:100%;height:80px;padding:0 30rpx;" :auto-focusd="true" />
  7. </view>
  8. </template>

TextareaProps

参数类型默认值必填说明
valuestring输入框的内容
placeholderstring输入框为空时占位符
placeholderStylestring指定 placeholder 的样式
placeholderClassstring“textarea-placeholder”指定 placeholder 的样式类
disabledbooleanfalse是否禁用
maxlengthnumber140最大输入长度,设置为 -1 的时候不限制最大长度
autoFocusbooleanfalse自动聚焦,拉起键盘
focusbooleanfalse获取焦点
autoHeightbooleanfalse是否自动增高,设置 autoHeight 时,style.height不生效
fixedbooleanfalse如果 Textarea 是在一个 position:fixed 的区域,需要显示指定属性 fixed 为 true
cursorSpacingnumber0指定光标与键盘的距离,单位 px 。取 Textarea 距离底部的距离和 cursorSpacing 指定的距离的最小值作为光标与键盘的距离
cursornumber-1指定 focus 时的光标位置
showConfirmBarbooleantrue是否显示键盘上方带有”完成“按钮那一栏
selectionStartnumber-1光标起始位置,自动聚集时有效,需与 selectionEnd 搭配使用
selectionEndnumber-1光标结束位置,自动聚集时有效,需与 selectionStart 搭配使用
adjustPositionbooleantrue键盘弹起时,是否自动上推页面
holdKeyboardbooleanfalsefocus 时,点击页面的时候不收起键盘
disableDefaultPaddingbooleanfalse是否去掉 iOS 下的默认内边距
onFocusBaseEventOrigFunction<onFocusEventDetail>输入框聚焦时触发
onBlurBaseEventOrigFunction<onBlurEventDetail>输入框失去焦点时触发
onLineChangeBaseEventOrigFunction<onLineChangeEventDetail>输入框行数变化时调用,event.detail = {height: 0, heightRpx: 0, lineCount: 0}
onInputBaseEventOrigFunction<onInputEventDetail>当键盘输入时,触发 input 事件,event.detail = {value, cursor, keyCode}

onInput 处理函数的返回值并不会反映到 textarea 上
onConfirmBaseEventOrigFunction<onConfirmEventDetail>点击完成时, 触发 confirm 事件,event.detail = {value: value}
onKeyboardHeightChangeBaseEventOrigFunction<onKeyboardHeightChangeEventDetail>键盘高度发生变化的时候触发此事件

API 支持度

API微信小程序H5React Native
TextareaProps.value✔️✔️✔️
TextareaProps.placeholder✔️✔️✔️
TextareaProps.placeholderStyle✔️
TextareaProps.placeholderClass✔️
TextareaProps.disabled✔️✔️✔️
TextareaProps.maxlength✔️✔️✔️
TextareaProps.autoFocus✔️✔️
TextareaProps.focus✔️✔️
TextareaProps.autoHeight✔️✔️
TextareaProps.fixed✔️
TextareaProps.cursorSpacing✔️
TextareaProps.cursor✔️
TextareaProps.showConfirmBar✔️
TextareaProps.selectionStart✔️✔️
TextareaProps.selectionEnd✔️✔️
TextareaProps.adjustPosition✔️
TextareaProps.holdKeyboard✔️
TextareaProps.disableDefaultPadding✔️
TextareaProps.onFocus✔️✔️✔️
TextareaProps.onBlur✔️✔️✔️
TextareaProps.onLineChange✔️✔️
TextareaProps.onInput✔️✔️✔️
TextareaProps.onConfirm✔️✔️
TextareaProps.onKeyboardHeightChange✔️

onFocusEventDetail

参数类型说明
valuestring输入值
heightnumber键盘高度

onBlurEventDetail

参数类型说明
valuestring输入值
cursornumber光标位置

onLineChangeEventDetail

参数类型
heightnumber
heightRpxnumber
lineCountnumber

onInputEventDetail

参数类型说明
valuestring输入值
cursornumber光标位置
keyCodenumber键值

onConfirmEventDetail

参数类型说明
valuestring输入值

onKeyboardHeightChangeEventDetail

参数类型说明
heightnumber键盘高度
durationnumber持续时间

API 支持度

API微信小程序H5React Native
Textarea✔️✔️✔️