UNPKG

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