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 |
| 类型 |
布尔|未定义 |
颜色 |
|
| 描述 |
从应用程序的调色板中使用的颜色。默认的选项是: |
| 属性 |
颜色 |
| 类型 |
字符串|未定义 |
防反跳 |
|
| 描述 |
设置等待触发的时间(以毫秒为单位) |
| 属性 |
防反跳 |
| 类型 |
数量 |
| 默认的 |
0 |
禁用 |
|
| 描述 |
如果 |
| 属性 |
禁用 |
| 类型 |
布尔 |
| 默认的 |
假 |
enterkeyhint |
|
| 描述 |
提示浏览器显示输入键。可能的值: |
| 属性 |
enterkeyhint |
| 类型 |
“done”|“enter”|“go”|“next”|“previous”|“search”|“send”|未定义 |
inputmode |
|
| 描述 |
提示浏览器显示哪个键盘。可能的值: |
| 属性 |
inputmode |
| 类型 |
“decimal”|“email”|“none”|“numeric”|“search”|“tel”|“text”|“url”|未定义 |
马克斯 |
|
| 描述 |
最大值，不能小于其最小值(min属性)。 |
| 属性 |
马克斯 |
| 类型 |
字符串|未定义 |
最大长度 |
|
| 描述 |
如果type属性的值为 |
| 属性 |
最大长度 |
| 类型 |
|数量未定义 |
最小值 |
|
| 描述 |
最小值，不能大于其最大值(max属性)。 |
| 属性 |
最小值 |
| 类型 |
字符串|未定义 |
最小长度 |
|
| 描述 |
如果type属性的值为 |
| 属性 |
最小长度 |
| 类型 |
|数量未定义 |
模式 |
|
| 描述 |
模式决定使用哪种平台样式。 |
| 属性 |
模式 |
| 类型 |
“ios”|“医学博士” |
多个 |
|
| 描述 |
如果 |
| 属性 |
多个 |
| 类型 |
布尔|未定义 |
的名字 |
|
| 描述 |
控件的名称，它与表单数据一起提交。 |
| 属性 |
的名字 |
| 类型 |
字符串 |
| 默认的 |
this.inputId |
模式 |
|
| 描述 | |
| 类型 |
字符串|未定义 |
占位符 |
|
| 描述 |
在输入值之前显示的指导性文本。 |
| 属性 |
占位符 |
| 类型 |
Null | string | undefined |
只读的 |
|
| 描述 |
如果 |
| 属性 |
只读的 |
| 类型 |
布尔 |
| 默认的 |
假 |
要求 |
|
| 描述 |
如果 |
| 属性 |
要求 |
| 类型 |
布尔 |
| 默认的 |
假 |
大小 |
|
| 描述 |
控件的初始大小。此值以像素为单位，除非type属性的值为 |
| 属性 |
大小 |
| 类型 |
|数量未定义 |
解释清楚 |
|
| 描述 |
如果 |
| 属性 |
解释清楚 |
| 类型 |
布尔 |
| 默认的 |
假 |
一步 |
|
| 描述 |
使用min和max属性来限制可设置值的增量。可能的值是: |
| 属性 |
一步 |
| 类型 |
字符串|未定义 |
类型 |
|
| 描述 |
要显示的控件类型。默认类型为文本。 |
| 属性 |
类型 |
| 类型 |
“日期”|“日期时间-本地”|“邮件”|“月”|“号码”|“密码”|“搜索”|“电话”|“文本”|“时间”|“url”|“星期” |
| 默认的 |
“文本” |
价值 |
|
| 描述 |
输入的值。 |
| 属性 |
价值 |
| 类型 |
Null | number | string | undefined |
| 默认的 |
＇＇ |
事件
| 的名字 | 描述 |
|---|---|
ionBlur |
当输入失去焦点时触发。 |
ionChange |
当值发生更改时发出。 |
ionFocus |
当输入有焦点时发出。 |
ionInput |
当键盘输入发生时触发。 |
方法
getInputElement |
|
|---|---|
| 描述 |
返回本地 |
| 签名 |
getInputElement () = > < HTMLInputElement承诺> |
setFocus |
|
| 描述 |
将注意力集中在母语上 |
| 签名 |
setFocus() = > <承诺无效> |
CSS自定义属性
| 的名字 | 描述 |
|---|---|
——背景 |
输入背景 |
——颜色 |
输入文本的颜色 |
——padding-bottom |
输入的底部填充 |
——padding-end |
如果方向为从左到右，则为右填充;如果方向为从右到左，则为左填充 |
——padding-start |
如果方向是从左到右，则为左填充;如果方向是从右到左，则为右填充 |
——padding-top |
输入的上填充 |
——placeholder-color |
输入占位符文本的颜色 |
——placeholder-font-style |
输入占位符文本的字体样式 |
——placeholder-font-weight |
输入占位符文本的字体权重 |
——placeholder-opacity |
输入占位符文本的不透明度 |