1 | import { ComponentType } from 'react'
|
2 | import { StandardProps, CommonEventFunction, FormItemProps } from './common'
|
3 | interface InputProps extends StandardProps, FormItemProps {
|
4 | /** 输入框的初始内容
|
5 | * @supported weapp, alipay, swan, tt, qq, jd, h5, rn
|
6 | */
|
7 | value?: string
|
8 | /** input 的类型
|
9 | * @default "text"
|
10 | * @supported weapp, alipay, swan, tt, qq, jd, h5, rn
|
11 | */
|
12 | type?: keyof InputProps.Type
|
13 | /** 是否是密码类型
|
14 | * @default false
|
15 | * @supported weapp, alipay, swan, tt, qq, jd, h5, rn
|
16 | */
|
17 | password?: boolean
|
18 | /** 输入框为空时占位符
|
19 | * @supported weapp, alipay, swan, tt, qq, jd, h5, rn
|
20 | */
|
21 | placeholder?: string
|
22 | /** 指定 placeholder 的样式
|
23 | * @supported weapp, alipay, swan, tt, qq, jd, rn
|
24 | */
|
25 | placeholderStyle?: string
|
26 | /** 指定 placeholder 的样式类
|
27 | * @default "input-placeholder"
|
28 | * @supported weapp, alipay, swan, tt, qq, jd
|
29 | */
|
30 | placeholderClass?: string
|
31 | /** 指定 placeholder 的文本颜色
|
32 | * @supported rn
|
33 | */
|
34 | placeholderTextColor?: string
|
35 | /** 是否禁用
|
36 | * @default false
|
37 | * @supported weapp, alipay, swan, tt, qq, jd, h5, rn
|
38 | */
|
39 | disabled?: boolean
|
40 | /** 最大输入长度,设置为 -1 的时候不限制最大长度
|
41 | * @default 140
|
42 | * @supported weapp, alipay, swan, tt, qq, jd, h5, rn
|
43 | */
|
44 | maxlength?: number
|
45 | /** 指定光标与键盘的距离,单位 px 。取 input 距离底部的距离和 cursor-spacing 指定的距离的最小值作为光标与键盘的距离
|
46 | * @default 0
|
47 | * @supported weapp, swan, tt, qq, jd
|
48 | */
|
49 | cursorSpacing?: number
|
50 | /** (即将废弃,请直接使用 focus )自动聚焦,拉起键盘
|
51 | * @default false
|
52 | * @deprecated
|
53 | * @supported weapp, qq, jd, h5
|
54 | */
|
55 | autoFocus?: boolean
|
56 | /** 获取焦点
|
57 | * @default false
|
58 | * @supported weapp, alipay, swan, tt, qq, jd, h5, rn
|
59 | */
|
60 | focus?: boolean
|
61 | /** 设置键盘右下角按钮的文字,仅在type='text'时生效
|
62 | * @alipay confirm-type 与 enableNative 属性冲突,若希望 confirm-type 生效,enableNative 不能设定为 false,而且不能设定 always-system
|
63 | * @default done
|
64 | * @supported weapp, alipay, swan, tt, qq, jd, rn
|
65 | */
|
66 | confirmType?: keyof InputProps.ConfirmType
|
67 | /** 点击键盘右下角按钮时是否保持键盘不收起
|
68 | * @default false
|
69 | * @supported weapp, alipay, swan, tt, qq, jd
|
70 | */
|
71 | confirmHold?: boolean
|
72 | /** 指定focus时的光标位置
|
73 | * @supported weapp, alipay, swan, tt, qq, jd, rn
|
74 | */
|
75 | cursor?: number
|
76 | /** 光标起始位置,自动聚集时有效,需与selection-end搭配使用
|
77 | * @default -1
|
78 | * @supported weapp, alipay, swan, tt, qq, jd, rn
|
79 | */
|
80 | selectionStart?: number
|
81 | /** 光标结束位置,自动聚集时有效,需与selection-start搭配使用
|
82 | * @default -1
|
83 | * @supported weapp, alipay, swan, tt, qq, jd, rn
|
84 | */
|
85 | selectionEnd?: number
|
86 | /** 键盘弹起时,是否自动上推页面
|
87 | * @default true
|
88 | * @supported weapp, swan, tt, qq, jd
|
89 | */
|
90 | adjustPosition?: boolean
|
91 | /** focus 时,点击页面的时候不收起键盘
|
92 | * @default false
|
93 | * @supported weapp, tt
|
94 | */
|
95 | holdKeyboard?: boolean
|
96 | /**
|
97 | * 强制 input 处于同层状态,默认 focus 时 input 会切到非同层状态 (仅在 iOS 下生效)
|
98 | * @default false
|
99 | * @supported weapp
|
100 | */
|
101 | alwaysEmbed?: boolean
|
102 | /**
|
103 | * 安全键盘加密公钥的路径,只支持包内路径
|
104 | * @supported weapp
|
105 | */
|
106 | safePasswordCertPath?: string
|
107 | /**
|
108 | * 安全键盘输入密码长度
|
109 | * @supported weapp
|
110 | */
|
111 | safePasswordLength?: number
|
112 | /**
|
113 | * 安全键盘加密时间戳
|
114 | * @supported weapp
|
115 | */
|
116 | safePasswordTimeStamp?: number
|
117 | /**
|
118 | * 安全键盘加密盐值
|
119 | * @supported weapp
|
120 | */
|
121 | safePasswordNonce?: string
|
122 | /**
|
123 | * 安全键盘计算hash盐值,若指定custom-hash 则无效
|
124 | * @supported weapp
|
125 | */
|
126 | safePasswordSalt?: string
|
127 | /**
|
128 | * 安全键盘计算hash的算法表达式,如 `md5(sha1('foo' + sha256(sm3(password + 'bar'))))`
|
129 | * @supported weapp
|
130 | */
|
131 | safePasswordCustomHash?: string
|
132 | /**
|
133 | * 当 type 为 number, digit, idcard 数字键盘是否随机排列
|
134 | * @default false
|
135 | * @supported alipay
|
136 | */
|
137 | randomNumber?: boolean
|
138 | /**
|
139 | * 是否为受控组件。为 true 时,value 内容会完全受 setData 控制。
|
140 | *
|
141 | * 建议当 type 值为 text 时不要将 controlled 设置为 true,详见 [Bugs & Tips](https://opendocs.alipay.com/mini/component/input#Bug%20%26%20Tip)
|
142 | * @default false
|
143 | * @supported alipay
|
144 | */
|
145 | controlled?: boolean
|
146 | /** 用于透传 `WebComponents` 上的属性到内部 H5 标签上
|
147 | * @supported h5
|
148 | */
|
149 | nativeProps?: Record<string, unknown>
|
150 | /** 组件名字,用于表单提交获取数据。
|
151 | * @supported alipay
|
152 | */
|
153 | name?: string
|
154 | /** 是否强制使用系统键盘和 Web-view 创建的 input 元素。为 true 时,confirm-type、confirm-hold 可能失效。
|
155 | * @default false
|
156 | * @supported alipay
|
157 | */
|
158 | alwaysSystem?: boolean
|
159 | /** 无障碍访问,(属性)元素的额外描述
|
160 | * @supported qq
|
161 | */
|
162 | ariaLabel?: string
|
163 | /** 当键盘输入时,触发input事件,event.detail = {value, cursor, keyCode},处理函数可以直接 return 一个字符串,将替换输入框的内容。
|
164 | * @supported weapp, alipay, swan, tt, qq, jd, h5, rn
|
165 | */
|
166 | onInput?: CommonEventFunction<InputProps.inputEventDetail>
|
167 | /** 输入框聚焦时触发,event.detail = { value, height },height 为键盘高度
|
168 | * @supported weapp, alipay, swan, tt, qq, jd, h5, rn
|
169 | */
|
170 | onFocus?: CommonEventFunction<InputProps.inputForceEventDetail>
|
171 | /** 输入框失去焦点时触发
|
172 | * @supported weapp, alipay, swan, tt, qq, jd, h5, rn
|
173 | */
|
174 | onBlur?: CommonEventFunction<InputProps.inputValueEventDetail>
|
175 | /** 点击完成按钮时触发
|
176 | * @supported weapp, alipay, swan, tt, qq, jd, h5, rn
|
177 | */
|
178 | onConfirm?: CommonEventFunction<InputProps.inputValueEventDetail>
|
179 | /** 键盘高度发生变化的时候触发此事件
|
180 | * @supported weapp, qq
|
181 | */
|
182 | onKeyboardHeightChange?: CommonEventFunction<InputProps.onKeyboardHeightChangeEventDetail>
|
183 | /** 用户昵称审核完毕后触发,仅在 type 为 "nickname" 时有效,event.detail = { pass, timeout }
|
184 | * @supported weapp
|
185 | */
|
186 | onNickNameReview?: CommonEventFunction
|
187 | }
|
188 | declare namespace InputProps {
|
189 | /** Input 类型 */
|
190 | interface Type {
|
191 | /** 文本输入键盘
|
192 | * @supported weapp, alipay, h5, rn
|
193 | */
|
194 | text
|
195 | /** 数字输入键盘
|
196 | * @supported weapp, alipay, h5, rn
|
197 | */
|
198 | number
|
199 | /** 身份证输入键盘
|
200 | *@supported weapp, alipay, rn
|
201 | */
|
202 | idcard
|
203 | /** 带小数点的数字键盘
|
204 | * @supported weapp, alipay, h5, rn
|
205 | */
|
206 | digit
|
207 | /** 密码安全输入键盘[指引](https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/safe-password.html)
|
208 | * @supported weapp, alipay
|
209 | */
|
210 | 'safe-password'
|
211 | /** 昵称输入键盘
|
212 | * @supported weapp, alipay
|
213 | */
|
214 | nickname
|
215 | /** 数字输入键盘
|
216 | * @supported alipay
|
217 | */
|
218 | numberpad
|
219 | /** 带小数点的数字键盘
|
220 | * @supported alipay
|
221 | */
|
222 | digitpad
|
223 | /** 身份证输入键盘
|
224 | * @supported alipay
|
225 | */
|
226 | idcardpad
|
227 | }
|
228 | /** Confirm 类型 */
|
229 | interface ConfirmType {
|
230 | /** 右下角按钮为“发送” */
|
231 | send
|
232 | /** 右下角按钮为“搜索” */
|
233 | search
|
234 | /** 右下角按钮为“下一个” */
|
235 | next
|
236 | /** 右下角按钮为“前往” */
|
237 | go
|
238 | /** 右下角按钮为“完成” */
|
239 | done
|
240 | }
|
241 | /** > 注意:React-Native 端 `inputEventDetail` 仅实现参数 `value`,若需实时获取光标位置则可通过 [`onSelectionChange`](https://reactnative.dev/docs/textinput#onselectionchange) 实现。 */
|
242 | interface inputEventDetail {
|
243 | /** 输入值 */
|
244 | value: string
|
245 | /** 光标位置 */
|
246 | cursor: number
|
247 | /** 键值 */
|
248 | keyCode: number
|
249 | }
|
250 | interface inputForceEventDetail {
|
251 | /** 输入值 */
|
252 | value: string
|
253 | /** 键盘高度 */
|
254 | height: number
|
255 | }
|
256 | interface inputValueEventDetail {
|
257 | /** 输入值 */
|
258 | value: string
|
259 | }
|
260 | interface onKeyboardHeightChangeEventDetail {
|
261 | /** 键盘高度 */
|
262 | height: number
|
263 | /** 持续时间 */
|
264 | duration: number
|
265 | }
|
266 | }
|
267 | /** 输入框。该组件是原生组件,使用时请注意相关限制
|
268 | * @classification forms
|
269 | * @supported weapp, alipay, swan, tt, qq, jd, h5, rn, harmony
|
270 | * @example_react
|
271 | * ```tsx
|
272 | * class App extends Component {
|
273 | * render () {
|
274 | * return (
|
275 | * <View className='example-body'>
|
276 | * <Text>可以自动聚焦的 input</Text>
|
277 | * <Input type='text' placeholder='将会获取焦点' focus/>
|
278 | * <Text>控制最大输入长度的 input</Text>
|
279 | * <Input type='text' placeholder='最大输入长度为 10' maxLength='10'/>
|
280 | * <Text>数字输入的 input</Text>
|
281 | * <Input type='number' placeholder='这是一个数字输入框'/>
|
282 | * <Text>密码输入的 input</Text>
|
283 | * <Input type='password' password placeholder='这是一个密码输入框'/>
|
284 | * <Text>带小数点的 input</Text>
|
285 | * <Input type='digit' placeholder='带小数点的数字键盘'/>
|
286 | * <Text>身份证输入的 input</Text>
|
287 | * <Input type='idcard' placeholder='身份证输入键盘'/>
|
288 | * <Text>控制占位符颜色的 input</Text>
|
289 | * <Input type='text' placeholder='占位符字体是红色的' placeholderStyle='color:red'/>
|
290 | * </View>
|
291 | * )
|
292 | * }
|
293 | * }
|
294 | * ```
|
295 | * @example_vue
|
296 | * ```html
|
297 | * <template>
|
298 | * <view class="example-body">
|
299 | * <text>可以自动聚焦的 input</text>
|
300 | * <input type="text" placeholder="将会获取焦点" :focus="true" />
|
301 | * <text>控制最大输入长度的 input</text>
|
302 | * <input type="text" placeholder="最大输入长度为 10" maxLength="10"/>
|
303 | * <text>数字输入的 input</text>
|
304 | * <input type="number" placeholder="这是一个数字输入框"/>
|
305 | * <text>密码输入的 input</text>
|
306 | * <input type="password" :password="true" placeholder="这是一个密码输入框"/>
|
307 | * <text>带小数点的 input</text>
|
308 | * <input type="digit" placeholder="带小数点的数字键盘"/>
|
309 | * <text>身份证输入的 input</text>
|
310 | * <input type="idcard" placeholder="身份证输入键盘"/>
|
311 | * <text>控制占位符颜色的 input</text>
|
312 | * <input type="text" placeholder="占位符字体是红色的" placeholder-style="color:red;"/>
|
313 | * </view>
|
314 | * </template>
|
315 | * ```
|
316 | * @see https://developers.weixin.qq.com/miniprogram/dev/component/input.html
|
317 | */
|
318 | declare const Input: ComponentType<InputProps>
|
319 | export { Input, InputProps }
|