# input

输入框。该组件是原生组件,使用时请注意相关限制

# 属性

属性 类型 默认值 必填 说明
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' 右下角按钮为“完成”
  1. tip: confirm-type 的最终表现与手机输入法本身的实现有关,部分安卓系统输入法和第三方输入法可能不支持或不完全支持
  2. tip: input 组件是一个原生组件,字体是系统字体,所以无法设置 font-family
  3. tip: 在 input 聚焦期间,避免使用 css 动画
  4. tip: 对于将 input 封装在自定义组件中、而 form 在自定义组件外的情况, form 将不能获得这个自定义组件中 input 的值。此时需要使用自定义组件的 内置 behaviors
  5. tip: 键盘高度发生变化,keyboardheightchange 事件可能会多次触发,开发者对于相同的 height 值应该忽略掉

# 扫码体验

# 示例代码

Copyright ©2024, All Rights Reserved