UNPKG

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