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