Input 输入框

通过键盘输入内容,是最基础的表单域包装

何时使用

一般用在表单页进行信息的收集,提供文本框、选择框两种类型

注意事项

  • 当作为表单组件,配合 Form/FormItem 组件使用时,需要设置 mode 的值为 form

代码示例

基本使用

属性

属性类型必填默认值说明
labelstring | slot-标签文案
controlledbooleanfalse是否受控模式
type'text' | 'number' | 'idcard' | 'digit' | 'numberpad' | 'digitpad' | 'idcardpad''text'输入框的类型
passwordbooleanfalse是否是密码类型。
placeholderstring-占位符。
placeholderClassstring-指定 placeholder 的样式类。
placeholderStylestring-指定 placeholder 的样式,可设置间距。
maxLengthnumber140最大长度。
confirmType'done' | 'go' | 'next' | 'search' | 'send'"done"设置键盘右下角按钮的文字,有效值:done(显示“完成”)、go(显示“前往”)、next(显示“下一个”)、search(显示“搜索”)、send(显示“发送”),平台不同显示的文字略有差异。注意:只有在 type=text 时有效。
confirmHoldbooleanfalse点击键盘右下角按钮时是否保持键盘不收起状态。
cursornumber-指定 focus 时的光标位置。
selectionStartnumber-1获取光标时,选中文本对应的焦点光标起始位置,需要和 selection-end 配合使用。
selectionEndnumber-1获取光标时,选中文本对应的焦点光标结束位置,需要和 selection-start 配合使用。
randomNumberbooleanfalse当 type 为 number, digit, idcard 数字键盘是否随机排列。
enableNativeboolean-是否启用 Native 渲染
layer'horizontal' | 'vertical''horizontal'input 排列位置
inputClsstring-input 输入框的样式类名
labelClsstring-label 区域的样式类名
valuestring-输入框的值
clearbooleantrue显示清除图标
autoFocusbooleanfalse自动聚焦,ios 可能会失效
refReact.Ref-用于操作表单的实例,有 focus 和 blur 两个方法
idstring-表单元素 id
namestring-表单元素 name
disabledbooleanfalse是否禁用
mode'noraml' | 'form'normal配合From/FormItem组件使用时,需设置为 from
classNamestring-类名

事件

事件名说明类型
onConfirm点击键盘完成时触发此回调(value: string, event: Event) => void
onClear清除输入内容时触发此回调(value: string, event: Event) => void
onFocus聚焦时触发触发此回调(value: string, event: Event) => void
onBlur失焦时触发此回调(value: string, event: Event) => void
onChange输入时触发此回调(value: string, event: Event) => void

样式类

类名说明
amd-input-item整体样式
amd-input-item-line整体样式
amd-input-item-layer左侧内容区域样式
amd-input-item-layer-vertical左侧内容区域样式
amd-input-item-layer-normal左侧内容区域样式
amd-input-item-label标签样式
amd-input-item-contentInput 组件样式
amd-input-item-clear清除图标区域样式
amd-input-item-clear-icon清除图标样式
amd-input-item-extra额外区域样式