input

更新时间：2024-12-09 11:57:47

基础库1.1.0开始支持,低版本需做兼容处理

开发者工具1.22.0开始支持

输入框。

属性

属性	类型	默认值	必填	说明
name	string		否	在表单中的字段名
value	string	''	否	输入框的初始内容
type	'number' | 'text' | 'idcard' | 'digit'	'text'	否	input 的类型
disabled	boolean	false	否	是否禁用
placeholder	string	''	否	输入框为空时占位符
password	boolean	false	否	是否是密码类型
placeholder-style	string	''	否	指定 placeholder 的样式
cursor-color	string	'#FE3666'	否	光标默认色, 目前支持hex颜色码
auto-focus	boolean	false	否	自动聚焦，拉起键盘
focus	boolean	false	否	获取焦点
maxlength	number	140	否	最大输入长度，设置为 -1 的时候不限制最大长度
confirm-type	'search' | 'send' | 'next' | 'go' | 'done'	'done'	否	设置键盘右下角按钮的文字，仅在 type='text' 时生效
bindconfirm	(e: { detail: { value: string } } & Event) => void		否	点击完成按钮时触发，event.detail = { value }
bindkeyboardheightchange	(e: { detail: { height: number, duration: number } } & Event) => void		否	键盘高度发生变化的时候触发此事件，event.detail = {height: height, duration: duration}

type

input 的类型

值	说明
'number'	数字输入键盘
'text'	文本输入键盘
'idcard'	身份证输入键盘
'digit'	带小数点的数字键盘

confirmType

设置键盘右下角按钮的文字，仅在 type='text' 时生效

值	说明
'search'	右下角按钮为“搜索”
'send'	右下角按钮为“发送”
'next'	右下角按钮为“下一个”
'go'	右下角按钮为“前往”
'done'	右下角按钮为“完成”

Bug & Tip

1. tip: confirm-type 的最终表现与手机输入法本身的实现有关，部分安卓系统输入法和第三方输入法可能不支持或不完全支持
2. tip: input 组件是一个原生组件，字体是系统字体，所以无法设置font-family.(原生组件使用限制 (opens new window))
3. tip: 在 input 聚焦期间，避免使用 css 动画
4. tip: 对于将 input 封装在自定义组件中、而 form 在自定义组件外的情况， form 将不能获得这个自定义组件中 input 的值。此时需要使用自定义组件的 内置 behaviors
5. tip: 键盘高度发生变化，keyboardheightchange 事件可能会多次触发，开发者对于相同的 height 值应该忽略掉
6. tip: 存在属性与控制限制 (opens new window)

扫码体验

示例代码