搜索文档 /
作用域

ion-input

输入组件是HTML输入元素的包装器,具有自定义样式和附加功能。它接受大部分与HTML输入相同的属性,但在桌面设备上工作得很好,并与移动设备上的键盘集成在一起。

它是用于文本的 类型 仅输入,例如 “文本” “密码” “电子邮件” “数量” “搜索” “电话” , “url” .它支持所有标准文本输入事件,包括keyup、keydown、keypress等。

使用


                <!——默认输入——>
               
                  <
                 ion-input
                 >
                  
                 ion-input
                 >
               
                <!——输入带值——>
               
                  <
                 ion-input
                
                 价值
                  
                  
                 自定义
                  
                 >
                  
                 ion-input
                 >
               
                <!——输入占位符——>
               
                  <
                 ion-input
                
                 占位符
                  
                  
                 输入输入
                  
                 >
                  
                 ion-input
                 >
               
                <!当有值——>时,用清除按钮输入
               
                  <
                 ion-input
                
                 clearInput
                
                 价值
                  
                  
                 清楚我
                  
                 >
                  
                 ion-input
                 >
               
                <!——数字类型输入——>
               
                  <
                 ion-input
                
                 类型
                  
                  
                 数量
                  
                
                 价值
                  
                  
                 333
                  
                 >
                  
                 ion-input
                 >
               
                <!——禁用输入——>
               
                  <
                 ion-input
                
                 价值
                  
                  
                 禁用
                  
                
                 禁用
                 >
                  
                 ion-input
                 >
               
                <!——只读输入——>
               
                  <
                 ion-input
                
                 价值
                  
                  
                 只读的
                  
                
                 只读的
                 >
                  
                 ion-input
                 >
               
                <!——带标签的输入——>
               
                  <
                 ion-item
                 >
               
                  <
                 ion-label
                 >
               默认标签
                  
                 ion-label
                 >
               
                  <
                 ion-input
                 >
                  
                 ion-input
                 >
               
                  
                 ion-item
                 >
               
                  <
                 ion-item
                 >
               
                  <
                 ion-label
                
                 位置
                  
                  
                 浮动
                  
                 >
               浮动标签
                  
                 ion-label
                 >
               
                  <
                 ion-input
                 >
                  
                 ion-input
                 >
               
                  
                 ion-item
                 >
               
                  <
                 ion-item
                 >
               
                  <
                 ion-label
                
                 位置
                  
                  
                 固定
                  
                 >
               固定的标签
                  
                 ion-label
                 >
               
                  <
                 ion-input
                 >
                  
                 ion-input
                 >
               
                  
                 ion-item
                 >
               
                  <
                 ion-item
                 >
               
                  <
                 ion-label
                
                 位置
                  
                  
                 堆放
                  
                 >
               堆叠标签
                  
                 ion-label
                 >
               
                  <
                 ion-input
                 >
                  
                 ion-input
                 >
               
                  
                 ion-item
                 >
复制 复制

                <!——默认输入——>
               
                  <
                 ion-input
                 >
                  
                 ion-input
                 >
               
                <!——输入带值——>
               
                  <
                 ion-input
                
                 价值
                  
                  
                 自定义
                  
                 >
                  
                 ion-input
                 >
               
                <!——输入占位符——>
               
                  <
                 ion-input
                
                 占位符
                  
                  
                 输入输入
                  
                 >
                  
                 ion-input
                 >
               
                <!当有值——>时,用清除按钮输入
               
                  <
                 ion-input
                
                 clear-input
                
                 价值
                  
                  
                 清楚我
                  
                 >
                  
                 ion-input
                 >
               
                <!——数字类型输入——>
               
                  <
                 ion-input
                
                 类型
                  
                  
                 数量
                  
                
                 价值
                  
                  
                 333
                  
                 >
                  
                 ion-input
                 >
               
                <!——禁用输入——>
               
                  <
                 ion-input
                
                 价值
                  
                  
                 禁用
                  
                
                 禁用
                 >
                  
                 ion-input
                 >
               
                <!——只读输入——>
               
                  <
                 ion-input
                
                 价值
                  
                  
                 只读的
                  
                
                 只读的
                 >
                  
                 ion-input
                 >
               
                <!——带标签的输入——>
               
                  <
                 ion-item
                 >
               
                  <
                 ion-label
                 >
               默认标签
                  
                 ion-label
                 >
               
                  <
                 ion-input
                 >
                  
                 ion-input
                 >
               
                  
                 ion-item
                 >
               
                  <
                 ion-item
                 >
               
                  <
                 ion-label
                
                 位置
                  
                  
                 浮动
                  
                 >
               浮动标签
                  
                 ion-label
                 >
               
                  <
                 ion-input
                 >
                  
                 ion-input
                 >
               
                  
                 ion-item
                 >
               
                  <
                 ion-item
                 >
               
                  <
                 ion-label
                
                 位置
                  
                  
                 固定
                  
                 >
               固定的标签
                  
                 ion-label
                 >
               
                  <
                 ion-input
                 >
                  
                 ion-input
                 >
               
                  
                 ion-item
                 >
               
                  <
                 ion-item
                 >
               
                  <
                 ion-label
                
                 位置
                  
                  
                 堆放
                  
                 >
               堆叠标签
                  
                 ion-label
                 >
               
                  <
                 ion-input
                 >
                  
                 ion-input
                 >
               
                  
                 ion-item
                 >
复制 复制

                进口
               反应
                
               
                
               useState
                
               
                
               
                “反应”
                
               
                进口
               
                
               IonContent
                
               IonHeader
                
               IonPage
                
               IonTitle
                
               IonToolbar
                
               IonInput
                
               IonItem
                
               IonLabel
                
               IonList
                
               IonItemDivider
                
               
                
               
                “@betway东盟体育appionic /反应”
                
               
                出口
               
                常量
               InputExamples
                
               反应
                
                足球俱乐部
               
                
               
                
                
               
                = >
               
                
               
                常量
               
                
               文本
                
               setText
                
               
                
               useState
                  <
                 字符串
                 >
                ();const [number, setNumber] = useState
                  <
                 数量
                 >
                ();回报(
                  <
                  IonPage
                 >
                
                  <
                  IonHeader
                 >
                
                  <
                  IonToolbar
                 >
                
                  <
                  IonTitle
                 >
                IonInput例子
                  
                  IonTitle
                 >
                
                  
                  IonToolbar
                 >
                
                  
                  IonHeader
                 >
                
                  <
                  IonContent
                 >
                
                  <
                  IonList
                 >
                
                  <
                  IonItemDivider
                 >
                使用占位符的默认输入
                  
                  IonItemDivider
                 >
                
                  <
                  IonItem
                 >
                
                  <
                  IonInput
                
                 价值
                  
                  
                 文本
                  
                
                 占位符
                  
                  
                 输入输入
                  
                
                 onIonChange
                  
                  
                  e
                 
                  = >
                 
                  setText
                  
                 e
                  
                 细节
                  
                 价值
                  
                  
                  
                 >
                  
                  IonInput
                 >
                
                  
                  IonItem
                 >
                
                  <
                  IonItemDivider
                 >
                有值时用清除按钮输入
                  
                  IonItemDivider
                 >
                
                  <
                  IonItem
                 >
                
                  <
                  IonInput
                
                 价值
                  
                  
                 文本
                  
                
                 占位符
                  
                  
                 输入输入
                  
                
                 onIonChange
                  
                  
                  e
                 
                  = >
                 
                  setText
                  
                 e
                  
                 细节
                  
                 价值
                  
                  
                  
                
                 clearInput
                 >
                  
                  IonInput
                 >
                
                  
                  IonItem
                 >
                
                  <
                  IonItemDivider
                 >
                许多类型的输入
                  
                  IonItemDivider
                 >
                
                  <
                  IonItem
                 >
                
                  <
                  IonInput
                
                 类型
                  
                  
                 数量
                  
                
                 价值
                  
                  
                  数量
                  
                
                 占位符
                  
                  
                 输入数量
                  
                
                 onIonChange
                  
                  
                  e
                 
                  = >
                 
                  setNumber
                  
                  方法用于
                  
                 e
                  
                 细节
                  
                 价值
                  
                  
                 
                  10
                  
                  
                  
                 >
                  
                  IonInput
                 >
                
                  
                  IonItem
                 >
                
                  <
                  IonItemDivider
                 >
                禁用输入
                  
                  IonItemDivider
                 >
                
                  <
                  IonItem
                 >
                
                  <
                  IonInput
                
                 价值
                  
                  
                 文本
                  
                
                 禁用
                 >
                  
                  IonInput
                 >
                
                  
                  IonItem
                 >
                
                  <
                  IonItemDivider
                 >
                只读的输入
                  
                  IonItemDivider
                 >
                
                  <
                  IonItem
                 >
                
                  <
                  IonInput
                
                 价值
                  
                  
                 文本
                  
                
                 只读的
                 >
                  
                  IonInput
                 >
                
                  
                  IonItem
                 >
                
                  <
                  IonItemDivider
                 >
                输入的标签
                  
                  IonItemDivider
                 >
                
                  <
                  IonItem
                 >
                
                  <
                  IonLabel
                 >
                默认标签
                  
                  IonLabel
                 >
                
                  <
                  IonInput
                 >
                  
                  IonInput
                 >
                
                  
                  IonItem
                 >
                
                  <
                  IonItem
                 >
                
                  <
                  IonLabel
                
                 位置
                  
                  
                 浮动
                  
                 >
                浮动标签
                  
                  IonLabel
                 >
                
                  <
                  IonInput
                
                 价值
                  
                  
                 文本
                  
                 >
                  
                  IonInput
                 >
                
                  
                  IonItem
                 >
                
                  <
                  IonItem
                 >
                
                  <
                  IonLabel
                
                 位置
                  
                  
                 固定
                  
                 >
                固定的标签
                  
                  IonLabel
                 >
                
                  <
                  IonInput
                
                 价值
                  
                  
                 文本
                  
                 >
                  
                  IonInput
                 >
                
                  
                  IonItem
                 >
                
                  <
                  IonItem
                 >
                
                  <
                  IonLabel
                
                 位置
                  
                  
                 堆放
                  
                 >
                堆叠标签
                  
                  IonLabel
                 >
                
                  <
                  IonInput
                
                 价值
                  
                  
                 文本
                  
                 >
                
                  
                  IonInput
                 >
                
                  
                  IonItem
                 >
                
                  
                  IonList
                 >
                
                  
                  IonContent
                 >
                
                  
                  IonPage
                 >
                );};
复制 复制

                进口
               
                
               组件
                
               h
                
               
                
               
                “@stencil /核心”
                
               @
                组件
                
                
               标签
                
               
                “input-example”
                
               styleUrl
                
               
                “input-example.css”
               
                
                
               
                出口
               
                
               
                InputExample
               
                
               
                渲染
                
                
               
                
               
                返回
               
                
               
                / /默认的输入
               
                  <
                 ion-input
                 >
                  
                 ion-input
                 >
                
               
                //输入值
               
                  <
                 ion-input
                
                 价值
                  
                  
                 自定义
                  
                 >
                  
                 ion-input
                 >
                
               
                //输入占位符
               
                  <
                 ion-input
                
                 占位符
                  
                  
                 输入输入
                  
                 >
                  
                 ion-input
                 >
                
               
                //有值时用clear按钮输入
               
                  <
                 ion-input
                
                 clearInput
                
                 价值
                  
                  
                 清楚我
                  
                 >
                  
                 ion-input
                 >
                
               
                //数字类型输入
               
                  <
                 ion-input
                
                 类型
                  
                  
                 数量
                  
                
                 价值
                  
                  
                 333
                  
                 >
                  
                 ion-input
                 >
                
               
                / /禁用输入
               
                  <
                 ion-input
                
                 价值
                  
                  
                 禁用
                  
                
                 禁用
                 >
                  
                 ion-input
                 >
                
               
                / /只读的输入
               
                  <
                 ion-input
                
                 价值
                  
                  
                 只读的
                  
                
                 只读的
                 >
                  
                 ion-input
                 >
                
               
                //带标签的输入
               
                  <
                 ion-item
                 >
                
                  <
                 ion-label
                 >
                默认标签
                  
                 ion-label
                 >
                
                  <
                 ion-input
                 >
                  
                 ion-input
                 >
                
                  
                 ion-item
                 >
                
               
                  <
                 ion-item
                 >
                
                  <
                 ion-label
                
                 位置
                  
                  
                 浮动
                  
                 >
                浮动标签
                  
                 ion-label
                 >
                
                  <
                 ion-input
                 >
                  
                 ion-input
                 >
                
                  
                 ion-item
                 >
                
               
                  <
                 ion-item
                 >
                
                  <
                 ion-label
                
                 位置
                  
                  
                 固定
                  
                 >
                固定的标签
                  
                 ion-label
                 >
                
                  <
                 ion-input
                 >
                  
                 ion-input
                 >
                
                  
                 ion-item
                 >
                
               
                  <
                 ion-item
                 >
                
                  <
                 ion-label
                
                 位置
                  
                  
                 堆放
                  
                 >
                堆叠标签
                  
                 ion-label
                 >
                
                  <
                 ion-input
                 >
                  
                 ion-input
                 >
                
                  
                 ion-item
                 >
               
                
                
               
                
               
                
复制 复制

                  <
                 模板
                 >
               
                <!——默认输入——>
               
                  <
                 ion-input
                 >
                  
                 ion-input
                 >
               
                <!——输入带值——>
               
                  <
                 ion-input
                
                 价值
                  
                  
                 自定义
                  
                 >
                  
                 ion-input
                 >
               
                <!——输入占位符——>
               
                  <
                 ion-input
                
                 占位符
                  
                  
                 输入输入
                  
                 >
                  
                 ion-input
                 >
               
                <!当有值——>时,用清除按钮输入
               
                  <
                 ion-input
                
                 clear-input
                
                 价值
                  
                  
                 清楚我
                  
                 >
                  
                 ion-input
                 >
               
                <!——数字类型输入——>
               
                  <
                 ion-input
                
                 类型
                  
                  
                 数量
                  
                
                 价值
                  
                  
                 333
                  
                 >
                  
                 ion-input
                 >
               
                <!——禁用输入——>
               
                  <
                 ion-input
                
                 价值
                  
                  
                 禁用
                  
                
                 禁用
                 >
                  
                 ion-input
                 >
               
                <!——只读输入——>
               
                  <
                 ion-input
                
                 价值
                  
                  
                 只读的
                  
                
                 只读的
                 >
                  
                 ion-input
                 >
               
                <!——带标签的输入——>
               
                  <
                 ion-item
                 >
               
                  <
                 ion-label
                 >
               默认标签
                  
                 ion-label
                 >
               
                  <
                 ion-input
                 >
                  
                 ion-input
                 >
               
                  
                 ion-item
                 >
               
                  <
                 ion-item
                 >
               
                  <
                 ion-label
                
                 位置
                  
                  
                 浮动
                  
                 >
               浮动标签
                  
                 ion-label
                 >
               
                  <
                 ion-input
                 >
                  
                 ion-input
                 >
               
                  
                 ion-item
                 >
               
                  <
                 ion-item
                 >
               
                  <
                 ion-label
                
                 位置
                  
                  
                 固定
                  
                 >
               固定的标签
                  
                 ion-label
                 >
               
                  <
                 ion-input
                 >
                  
                 ion-input
                 >
               
                  
                 ion-item
                 >
               
                  <
                 ion-item
                 >
               
                  <
                 ion-label
                
                 位置
                  
                  
                 堆放
                  
                 >
               堆叠标签
                  
                 ion-label
                 >
               
                  <
                 ion-input
                 >
                  
                 ion-input
                 >
               
                  
                 ion-item
                 >
               
                  
                 模板
                 >
               
                  <
                 脚本
                 >
                 
                  进口
                 
                  
                 IonLabel
                  
                 IonInput
                  
                 IonItem
                  
                 
                  
                 
                  “@betway东盟体育appionic / vue”
                  
                 
                  进口
                 
                  
                 defineComponent
                  
                 
                  
                 
                  “vue”
                  
                 
                  出口
                 
                  默认的
                 
                  defineComponent
                  
                  
                 组件
                  
                 
                  
                 IonLabel
                  
                 IonInput
                  
                 IonItem
                  
                 
                  
                  
                  
                 
                  
                 脚本
                 >
复制 复制

属性

接受

描述

如果type属性的值为“文件”,则该属性将指示服务器接受的文件类型,否则将被忽略。该值必须是一个逗号分隔的惟一内容类型说明符列表。

属性 接受
类型 字符串|未定义

autocapitalize

描述

指示是否以及如何在用户输入/编辑文本值时自动将其大写。可用的选项:“关闭”“没有”“上”“句子”“单词”“角色”

属性 autocapitalize
类型 字符串
默认的 “关闭”

自动完成

描述

指示控件的值是否可由浏览器自动完成。

属性 自动完成
类型 “on”|“关闭”|“name”|“honorific-prefix”|“名字”|“additional-name”|“姓”|“honorific-suffix”|“昵称”|“电子邮件”|“用户名”|“新密码”|“当前口令”|“one-time-code”|“organization-title”|“组织”|“街道地址”|“address-line1”|“address-line2”|“address-line3”|“address-level4”|“address-level3”|“address-level2”|“address-level1”|“国家”|“国家的名称”|“邮政编码”|“cc-name”|“cc-given-name”| |“cc-additional-name”"cc-family-name" | "cc-number" | "cc-exp" | "cc-exp-month" | "cc-exp-month" | "cc-exp-year" | "cc-csc" | "cc-type" | "transaction-currency" | "transaction-amount" | "language" | "bday" | "bday-day" | "bday-month" | " bdayyear " | "sex" | "tel" | "tel-country-code" | "tel-national" | "tel-area-code" | "tel-country-code" | "tel-extension" | "impp" | "url" | "photo"
默认的 “关闭”

自动更正

描述

当用户输入/编辑文本值时,是否启用自动更正功能。

属性 自动更正
类型 “关闭”|“on”
默认的 “关闭”

自动对焦

描述

这个布尔属性允许您指定表单控件在页面加载时应该具有输入焦点。

属性 自动对焦
类型 布尔
默认的

clearInput

描述

如果真正的,当有值时,输入中将出现一个清晰的图标。单击它将清除输入。

属性 clear-input
类型 布尔
默认的

clearOnEdit

描述

如果真正的,该值将在编辑后被清除。默认为真正的类型“密码”对于所有其他类型。

属性 clear-on-edit
类型 布尔|未定义

颜色

描述

从应用程序的调色板中使用的颜色。默认的选项是:“主”“二级”“三级”“成功”“警告”“危险”“光”“媒介”,“黑暗”.有关颜色的更多信息,请参见 主题

属性 颜色
类型 字符串|未定义

防反跳

描述

设置等待触发的时间(以毫秒为单位)ionChange事件。这也会影响表单绑定,例如ngModelv模型

属性 防反跳
类型 数量
默认的 0

禁用

描述

如果真正的,用户无法与输入进行交互。

属性 禁用
类型 布尔
默认的

enterkeyhint

描述

提示浏览器显示输入键。可能的值:“进入”“完成”“走”“下一个”“以前”“搜索”,“发送”

属性 enterkeyhint
类型 “done”|“enter”|“go”|“next”|“previous”|“search”|“send”|未定义

inputmode

描述

提示浏览器显示哪个键盘。可能的值:“没有”“文本”“电话”“url”“电子邮件”“数字”“小数”,“搜索”

属性 inputmode
类型 “decimal”|“email”|“none”|“numeric”|“search”|“tel”|“text”|“url”|未定义

马克斯

描述

最大值,不能小于其最小值(min属性)。

属性 马克斯
类型 字符串|未定义

最大长度

描述

如果type属性的值为文本电子邮件搜索密码电话,或url,此属性指定用户可以输入的最大字符数。

属性 最大长度
类型 |数量未定义

最小值

描述

最小值,不能大于其最大值(max属性)。

属性 最小值
类型 字符串|未定义

最小长度

描述

如果type属性的值为文本电子邮件搜索密码电话,或url,此属性指定用户可以输入的最小字符数。

属性 最小长度
类型 |数量未定义

模式

描述

模式决定使用哪种平台样式。

属性 模式
类型 “ios”|“医学博士”

多个

描述

如果真正的,用户可以输入多个值。当type属性设置为时,此属性将应用“电子邮件”“文件”,否则将被忽略。

属性 多个
类型 布尔|未定义

的名字

描述

控件的名称,它与表单数据一起提交。

属性 的名字
类型 字符串
默认的 this.inputId

模式

描述

用于检查值的正则表达式。模式必须匹配整个值,而不仅仅是某个子集。使用title属性来描述模式以帮助用户。当type属性的值为时,此属性将应用“文本”“搜索”“电话”“url”“电子邮件”“日期”,或“密码”,否则将被忽略。当type属性为“日期”模式将只用于不支持“日期”输入类型本身。看到

属性 模式
类型 字符串|未定义

占位符

描述

在输入值之前显示的指导性文本。

属性 占位符
类型 Null | string | undefined

只读的

描述

如果真正的,用户不能修改。

属性 只读的
类型 布尔
默认的

要求

描述

如果真正的,用户必须在提交表单之前填写一个值。

属性 要求
类型 布尔
默认的

大小

描述

控件的初始大小。此值以像素为单位,除非type属性的值为“文本”“密码”,在这种情况下,它是一个整数字符数。此属性仅当类型属性设置为“文本”“搜索”“电话”“url”“电子邮件”,或“密码”,否则将被忽略。

属性 大小
类型 |数量未定义

解释清楚

描述

如果真正的,元素将检查其拼写和语法。

属性 解释清楚
类型 布尔
默认的

一步

描述

使用min和max属性来限制可设置值的增量。可能的值是:“任何”或者一个正的浮点数。

属性 一步
类型 字符串|未定义

类型

描述

要显示的控件类型。默认类型为文本。

属性 类型
类型 “日期”|“日期时间-本地”|“邮件”|“月”|“号码”|“密码”|“搜索”|“电话”|“文本”|“时间”|“url”|“星期”
默认的 “文本”

价值

描述

输入的值。

属性 价值
类型 Null | number | string | undefined
默认的 ''

事件

的名字 描述
ionBlur 当输入失去焦点时触发。
ionChange 当值发生更改时发出。
ionFocus 当输入有焦点时发出。
ionInput 当键盘输入发生时触发。

方法

getInputElement

描述

返回本地<输入>引擎盖下使用的元素。

签名 getInputElement () = > < HTMLInputElement承诺>

setFocus

描述

将注意力集中在母语上输入ion-input.使用这个方法而不是全局input.focus ()

签名 setFocus() = > <承诺无效>

CSS自定义属性

的名字 描述
——背景 输入背景
——颜色 输入文本的颜色
——padding-bottom 输入的底部填充
——padding-end 如果方向为从左到右,则为右填充;如果方向为从右到左,则为左填充
——padding-start 如果方向是从左到右,则为左填充;如果方向是从右到左,则为右填充
——padding-top 输入的上填充
——placeholder-color 输入占位符文本的颜色
——placeholder-font-style 输入占位符文本的字体样式
——placeholder-font-weight 输入占位符文本的字体权重
——placeholder-opacity 输入占位符文本的不透明度
查看源代码
Baidu