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 |
输入占位符文本的不透明度 |