UNPKG

7.55 kBTypeScriptView Raw
1import { ComponentType } from 'react'
2import { StandardProps, CommonEventFunction, FormItemProps } from './common'
3interface TextareaProps extends StandardProps, FormItemProps {
4 /** 输入框的内容
5 * @supported weapp, alipay, swan, tt, qq, jd, h5, rn, harmony_hybrid
6 */
7 value?: string
8 /** 设置 React 非受控输入框的初始内容
9 * @supported weapp, alipay, swan, tt, qq, jd, h5, rn, harmony_hybrid
10 * @unique
11 */
12 defaultValue?: string
13 /** 输入框为空时占位符
14 * @supported weapp, alipay, swan, tt, qq, jd, h5, rn, harmony_hybrid
15 */
16 placeholder?: string
17 /** 指定 placeholder 的样式
18 * @supported weapp, alipay, swan, tt, qq, jd
19 */
20 placeholderStyle?: string
21 /** 指定 placeholder 的样式类
22 * @default "textarea-placeholder"
23 * @supported weapp, alipay, swan, tt, qq, jd
24 */
25 placeholderClass?: string
26 /** 是否禁用
27 * @default false
28 * @supported weapp, alipay, swan, tt, qq, jd, h5, rn, harmony_hybrid
29 */
30 disabled?: boolean
31 /** 最大输入长度,设置为 -1 的时候不限制最大长度
32 * @default 140
33 * @supported weapp, alipay, swan, tt, qq, jd, h5, rn, harmony_hybrid
34 */
35 maxlength?: number
36 /** 自动聚焦,拉起键盘
37 * @default false
38 * @supported weapp, swan, qq, jd, h5, harmony_hybrid
39 */
40 autoFocus?: boolean
41 /** 获取焦点
42 * @default false
43 * @supported weapp, alipay, swan, tt, qq, jd, h5, rn, harmony_hybrid
44 */
45 focus?: boolean
46 /** 是否自动增高,设置 autoHeight 时,style.height不生效
47 * @default false
48 * @supported weapp, alipay, swan, tt, qq, jd, h5, rn, harmony_hybrid
49 */
50 autoHeight?: boolean
51 /** 如果 Textarea 是在一个 `position:fixed` 的区域,需要显示指定属性 fixed 为 true
52 * @default false
53 * @supported weapp, swan, qq, jd
54 */
55 fixed?: boolean
56 /** 指定光标与键盘的距离,单位 px 。取 Textarea 距离底部的距离和 cursorSpacing 指定的距离的最小值作为光标与键盘的距离
57 * @default 0
58 * @supported weapp, swan, tt, qq, jd
59 */
60 cursorSpacing?: number
61 /** 指定 focus 时的光标位置
62 * @default -1
63 * @supported weapp, swan, tt, qq, jd
64 */
65 cursor?: number
66 /** 是否显示键盘上方带有”完成“按钮那一栏
67 * @default true
68 * @supported weapp, swan, tt, qq, jd
69 */
70 showConfirmBar?: boolean
71 /** 光标起始位置,自动聚集时有效,需与 selectionEnd 搭配使用
72 * @default -1
73 * @supported weapp, swan, tt, qq, jd, rn
74 */
75 selectionStart?: number
76 /** 光标结束位置,自动聚集时有效,需与 selectionStart 搭配使用
77 * @default -1
78 * @supported weapp, swan, tt, qq, jd, rn
79 */
80 selectionEnd?: number
81 /** 键盘弹起时,是否自动上推页面
82 * @default true
83 * @supported weapp, swan, tt, qq, jd
84 */
85 adjustPosition?: boolean
86 /** focus 时,点击页面的时候不收起键盘
87 * @default false
88 * @supported weapp, tt
89 */
90 holdKeyboard?: boolean
91 /** 是否去掉 iOS 下的默认内边距
92 * @default false
93 * @supported weapp, tt
94 */
95 disableDefaultPadding?: boolean
96 /** 用于透传 `WebComponents` 上的属性到内部 H5 标签上
97 * @supported h5, harmony_hybrid
98 */
99 nativeProps?: Record<string, unknown>
100 /** 设置键盘右下角按钮的文字
101 * @supported weapp, alipay, swan, tt
102 */
103 confirmType?: 'send' | 'search' | 'next' | 'go' | 'done' | 'return'
104 /** 点击键盘右下角按钮时是否保持键盘不收起
105 * @supported weapp, swan, tt
106 */
107 confirmHold?: boolean
108 /** 组件名字,用于表单提交获取数据。
109 * @supported alipay
110 */
111 name?: string
112 /** 是否渲染字数统计功能(是否删除默认计数器/是否显示字数统计)。
113 * @default true
114 * @supported alipay
115 */
116 showCount?: boolean
117 /** 是否为受控组件。为 true 时,value 内容会完全受 setData 控制。
118 * @default false
119 * @supported alipay
120 */
121 controlled?: boolean
122 /** 无障碍访问,(属性)元素的额外描述
123 * @supported qq
124 */
125 ariaLabel?: string
126 /** 键盘对齐位置
127 * @supported weapp
128 * @default false
129 */
130 adjustKeyboardTo?: boolean
131 /** 输入框聚焦时触发
132 * @supported weapp, alipay, swan, tt, qq, jd, h5, rn, harmony_hybrid
133 */
134 onFocus?: CommonEventFunction<TextareaProps.onFocusEventDetail>
135 /** 输入框失去焦点时触发
136 * @supported weapp, alipay, swan, tt, qq, jd, h5, rn, harmony_hybrid
137 */
138 onBlur?: CommonEventFunction<TextareaProps.onBlurEventDetail>
139 /** 输入框行数变化时调用
140 * @supported weapp, swan, tt, qq, jd, rn
141 */
142 onLineChange?: CommonEventFunction<TextareaProps.onLineChangeEventDetail>
143 /** 当键盘输入时,触发 input 事件
144 *
145 * **onInput 处理函数的返回值并不会反映到 textarea 上**
146 * @supported weapp, alipay, swan, tt, qq, jd, h5, rn, harmony_hybrid
147 */
148 onInput?: CommonEventFunction<TextareaProps.onInputEventDetail>
149 /** 点击完成时, 触发 confirm 事件
150 * @supported weapp, alipay, swan, tt, qq, jd, h5, rn, harmony_hybrid
151 */
152 onConfirm?: CommonEventFunction<TextareaProps.onConfirmEventDetail>
153 /** 键盘高度发生变化的时候触发此事件
154 * @supported weapp, tt
155 */
156 onKeyboardHeightChange?: CommonEventFunction<TextareaProps.onKeyboardHeightChangeEventDetail>
157}
158declare namespace TextareaProps {
159 interface onFocusEventDetail {
160 /** 输入值 */
161 value: string
162 /** 键盘高度 */
163 height: number
164 }
165 interface onBlurEventDetail {
166 /** 输入值 */
167 value: string
168 /** 光标位置 */
169 cursor: number
170 }
171 interface onLineChangeEventDetail {
172 height: number
173 heightRpx: number
174 lineCount: number
175 }
176 interface onInputEventDetail {
177 /** 输入值 */
178 value: string
179 /** 光标位置 */
180 cursor: number
181 /** 键值 */
182 keyCode: number
183 }
184 interface onConfirmEventDetail {
185 /** 输入值 */
186 value: string
187 }
188 interface onKeyboardHeightChangeEventDetail {
189 /** 键盘高度 */
190 height: number
191 /** 持续时间 */
192 duration: number
193 }
194}
195/** 多行输入框。该组件是原生组件,使用时请注意相关限制
196 * @classification forms
197 * @supported weapp, alipay, swan, tt, qq, jd, h5, rn, harmony, harmony_hybrid
198 * @example_react
199 * ```tsx
200 * export default class PageView extends Component {
201 * constructor() {
202 * super(...arguments)
203 * }
204 *
205 * render() {
206 * return (
207 * <View className='components-page'>
208 * <Text>输入区域高度自适应,不会出现滚动条</Text>
209 * <Textarea style='background:#fff;width:100%;min-height:80px;padding:0 30rpx;' autoHeight/>
210 * <Text>这是一个可以自动聚焦的 textarea</Text>
211 * <Textarea style='background:#fff;width:100%;height:80px;padding:0 30rpx;' autoFocus/>
212 * </View>
213 * )
214 * }
215 * }
216 * ```
217 * @example_vue
218 * ```html
219 * <template>
220 * <view class="components-page">
221 * <text>输入区域高度自适应,不会出现滚动条</text>
222 * <textarea style="background:#efefef;width:100%;min-height:80px;padding:0 30rpx;" :auto-height="true" />
223 * <text>这是一个可以自动聚焦的 textarea</text>
224 * <textarea style="background:#efefef;width:100%;height:80px;padding:0 30rpx;" :auto-focusd="true" />
225 * </view>
226 * </template>
227 * ```
228 * @see https://developers.weixin.qq.com/miniprogram/dev/component/textarea.html
229 */
230declare const Textarea: ComponentType<TextareaProps>
231export { Textarea, TextareaProps }