版本：v8

ion-input

输入组件是 HTML 输入元素的包装器，具有自定义样式和附加功能。它接受与 HTML 输入相同的属性，并在移动设备上与键盘集成。

基本用法

类型

输入组件仅用于文本类型输入，例如 "text"、"password"、"email"、"number"、"search"、"tel" 和 "url"。它支持所有标准文本输入事件，包括 keyup、keydown、keypress 等等。默认 type 为 "text"。

清除选项

输入提供两种基于您与之交互的方式来清除输入的选项。第一种方式是添加 clearInput 属性，当输入具有 value 时，将显示一个清除按钮。第二种方式是 clearOnEdit 属性，它将在输入失去焦点并在其上再次键入后清除输入。类型设置为 "password" 的输入将默认启用 clearOnEdit。

填充输入

Material Design 为输入提供填充样式。输入上的 fill 属性可以设置为 "solid" 或 "outline"。

通过将输入的 mode 设置为 md，可以在 iOS 上使用填充输入。

警告

在 ion-item 中不应使用使用 fill 的输入，因为组件之间存在样式冲突。

辅助文本和错误文本

辅助文本和错误文本可以使用 helperText 和 errorText 属性在输入内部使用。除非将 ion-invalid 和 ion-touched 类添加到 ion-input，否则错误文本将不会显示。这确保了在用户有机会输入数据之前不会显示错误。

在 Angular 中，这通过表单验证自动完成。在 JavaScript、React 和 Vue 中，需要根据您自己的验证手动添加该类。

输入计数器

输入计数器是在输入下方显示的文本，用于通知用户已输入了多少个字符，以及输入可以接受的总字符数。添加计数器时，默认行为是将显示的值格式化为 inputLength / maxLength。可以通过将格式化程序函数传递到 counterFormatter 属性来自定义此行为。

ion-item 上的 counter 和 counterFormatter 属性在 Ionic 7 中已弃用，应直接在 ion-input 上使用。

带有计数器的输入会在输入和计数器之间添加一个边框，因此不应将其放置在 ion-item 内，因为 ion-item 在项目下方添加了额外的边框。可以添加 ion-padding-start 类以将计数器输入与项目内部的输入对齐。

过滤用户输入

开发人员可以使用 ionInput 事件来更新输入值以响应用户输入，例如 keypress。这对于过滤掉无效或不需要的字符很有用。

在状态变量中存储值时，我们建议更新状态变量和 ion-input 组件值。这确保了状态变量和 ion-input 组件值保持同步。

输入屏蔽

输入掩码是限制输入以支持有效输入值的表达式。Ionic 建议使用 Maskito 进行输入屏蔽。Maskito 是一个轻量级、无依赖关系的库，用于屏蔽输入字段。它支持各种掩码，包括电话号码、信用卡、日期等等。

要开始使用 Maskito，请安装该库

npm install @maskito/core @maskito/{angular,react,vue}

注意

请将 Maskito 的错误报告提交到 Maskito Github 仓库。如需技术支持，请使用 Ionic 论坛或 Ionic Discord。

开始和结束插槽（实验性）

start 和 end 插槽可用于在输入的任一侧放置图标、按钮或前缀/后缀文本。

请注意，此功能被认为是实验性的，因为它依赖于模拟版本的 Web 组件插槽。因此，模拟行为可能与原生插槽行为不完全匹配。

注意

在大多数情况下，放置在这些插槽中的 Icon 组件应具有 aria-hidden="true"。有关更多信息，请参阅图标可访问性文档。

如果插槽内容旨在进行交互，则应将其包装在交互式元素（如 Button）中。这确保了可以将内容选项卡化。

主题

颜色

设置 color 属性会更改每个输入的颜色调色板。在 ios 模式下，此属性会更改光标颜色。在 md 模式下，此属性会更改光标颜色以及突出显示/下划线颜色。

注意

color 属性 *不会* 更改输入的文本颜色。为此，请使用 --color CSS 属性。

CSS 自定义属性

Input 使用作用域封装，这意味着它会在运行时自动通过在每个样式中追加一个额外的类来为其 CSS 设置作用域。在 CSS 中覆盖作用域选择器需要更高的特异性选择器。针对 ion-input 进行自定义将不起作用；因此我们建议添加一个类并通过这种方式对其进行自定义。

从旧版输入语法迁移

Ionic 7.0 中引入了一种更简单的输入语法。这种新的语法减少了设置输入所需的样板代码，解决了可访问性问题，并改善了开发人员体验。

开发人员可以一次迁移一个输入。虽然开发人员可以继续使用旧版语法，但我们建议尽快迁移。

使用现代语法

使用现代语法涉及三个步骤

删除 ion-label 并改用 ion-input 上的 label 属性。标签的位置可以使用 ion-input 上的 labelPlacement 属性进行配置。
将特定于输入的属性从 ion-item 移动到 ion-input 上。这包括 counter、counterFormatter、fill 和 shape 属性。
删除 ion-item 上的 helper 和 error 插槽的使用，改用 ion-input 上的 helperText 和 errorText 属性。

JavaScript
Angular
React
Vue

<!-- Label and Label Position -->

<!-- Before -->
<ion-item>
  <ion-label position="floating">Email:</ion-label>
  <ion-input></ion-input>
</ion-item>

<!-- After -->
<ion-item>
  <ion-input label="Email:" label-placement="floating"></ion-input>
</ion-item>


<!-- Fill -->

<!-- Before -->
<ion-item fill="outline" shape="round">
  <ion-label position="floating">Email:</ion-label>
  <ion-input></ion-input>
</ion-item>

<!-- After -->

<!-- Inputs using `fill` should not be placed in ion-item -->
<ion-input fill="outline" shape="round" label="Email:" label-placement="floating"></ion-input>

<!-- Input-specific features on ion-item -->

<!-- Before -->
<ion-item counter="true">
  <ion-label position="floating">Email:</ion-label>
  <ion-input maxlength="100"></ion-input>
  <div slot="helper">Enter an email</div>
  <div slot="error">Please enter a valid email</div>
</ion-item>

<!-- After -->

<!--
  Metadata such as counters and helper text should not
  be used when an input is in an item/list. If you need to
  provide more context on a input, consider using an ion-note
  underneath the ion-list.
-->

<ion-input
  label="Email:"
  counter="true"
  maxlength="100"
  helper-text="Enter an email"
  error-text="Please enter a valid email"
></ion-input>

<!-- Label and Label Position -->

<!-- Before -->
<ion-item>
  <ion-label position="floating">Email:</ion-label>
  <ion-input></ion-input>
</ion-item>

<!-- After -->
<ion-item>
  <ion-input label="Email:" labelPlacement="floating"></ion-input>
</ion-item>


<!-- Fill -->

<!-- Before -->
<ion-item fill="outline" shape="round">
  <ion-label position="floating">Email:</ion-label>
  <ion-input></ion-input>
</ion-item>

<!-- After -->

<!-- Inputs using `fill` should not be placed in ion-item -->
<ion-input fill="outline" shape="round" label="Email:" labelPlacement="floating"></ion-input>

<!-- Input-specific features on ion-item -->

<!-- Before -->
<ion-item [counter]="true">
  <ion-label position="floating">Email:</ion-label>
  <ion-input maxlength="100"></ion-input>
  <div slot="helper">Enter an email</div>
  <div slot="error">Please enter a valid email</div>
</ion-item>

<!-- After -->

<!--
  Metadata such as counters and helper text should not
  be used when an input is in an item/list. If you need to
  provide more context on a input, consider using an ion-note
  underneath the ion-list.
-->

<ion-input
  label="Email:"
  [counter]="true"
  maxlength="100"
  helperText="Enter an email"
  errorText="Please enter a valid email"
></ion-input>

{/* Label and Label Position */}

{/* Before */}
<IonItem>
  <IonLabel position="floating">Email:</IonLabel>
  <IonInput></IonInput>
</IonItem>

{/* After */}
<IonItem>
  <IonInput label="Email:" labelPlacement="floating"></IonInput>
</IonItem>


{/* Fill */}

{/* Before */}
<IonItem fill="outline" shape="round">
  <IonLabel position="floating">Email:</IonLabel>
  <IonInput></IonInput>
</IonItem>

{/* After */}

{/* Inputs using `fill` should not be placed in IonItem */}
<IonInput fill="outline" shape="round" label="Email:" labelPlacement="floating"></IonInput>

{/* Input-specific features on IonItem */}

{/* Before */}
<IonItem counter={true}>
  <IonLabel position="floating">Email:</IonLabel>
  <IonInput maxlength="100"></IonInput>
  <div slot="helper">Enter an email</div>
  <div slot="error">Please enter a valid email</div>
</IonItem>

{/* After */}

{/*
  Metadata such as counters and helper text should not
  be used when an input is in an item/list. If you need to
  provide more context on a input, consider using an IonNote
  underneath the IonList.
*/}

<IonInput
  label="Email:"
  counter={true}
  maxlength="100"
  helperText="Enter an email"
  errorText="Please enter a valid email"
></IonInput>

<!-- Label and Label Position -->

<!-- Before -->
<ion-item>
  <ion-label position="floating">Email:</ion-label>
  <ion-input></ion-input>
</ion-item>

<!-- After -->
<ion-item>
  <ion-input label="Email:" label-placement="floating"></ion-input>
</ion-item>


<!-- Fill -->

<!-- Before -->
<ion-item fill="outline" shape="round">
  <ion-label position="floating">Email:</ion-label>
  <ion-input></ion-input>
</ion-item>

<!-- After -->

<!-- Inputs using `fill` should not be placed in ion-item -->
<ion-input fill="outline" shape="round" label="Email:" label-placement="floating"></ion-input>

<!-- Input-specific features on ion-item -->

<!-- Before -->
<ion-item :counter="true">
  <ion-label position="floating">Email:</ion-label>
  <ion-input maxlength="100"></ion-input>
  <div slot="helper">Enter an email</div>
  <div slot="error">Please enter a valid email</div>
</ion-item>

<!-- After -->

<!--
  Metadata such as counters and helper text should not
  be used when an input is in an item/list. If you need to
  provide more context on a input, consider using an ion-note
  underneath the ion-list.
-->

<ion-input
  label="Email:"
  :counter="true"
  maxlength="100"
  helper-text="Enter an email"
  error-text="Please enter a valid email"
></ion-input>

使用旧版语法

Ionic 使用启发式方法来检测应用程序是否正在使用现代输入语法。在某些情况下，最好继续使用旧版语法。开发人员可以将 ion-input 上的 legacy 属性设置为 true 来强制该输入实例使用旧版语法。

接口

InputChangeEventDetail

interface InputChangeEventDetail {
  value: string | undefined | null;
}

InputCustomEvent

虽然不是必需的，但此接口可以在 CustomEvent 接口的地方使用，以便对从该组件发出的 Ionic 事件进行更强的类型化。

interface InputCustomEvent extends CustomEvent {
  detail: InputChangeEventDetail;
  target: HTMLIonInputElement;
}

属性

autocapitalize

描述	指示是否以及如何自动将文本值大写，因为它是用户输入/编辑的。可用选项：`"off"`、`"none"`、`"on"`、`"sentences"`、`"words"`、`"characters"`。
属性	`autocapitalize`
类型	`字符串`
默认值	`'off'`

autocomplete

描述	指示浏览器是否可以自动完成控件的值。
属性	`autocomplete`
类型	"name" ｜ "email" ｜ "tel" ｜ "url" ｜ "on" ｜ "off" ｜ "honorific-prefix" ｜ "given-name" ｜ "additional-name" ｜ "family-name" ｜ "honorific-suffix" ｜ "nickname" ｜ "username" ｜ "new-password" ｜ "current-password" ｜ "one-time-code" ｜ "organization-title" ｜ "organization" ｜ "street-address" ｜ "address-line1" ｜ "address-line2" ｜ "address-line3" ｜ "address-level4" ｜ "address-level3" ｜ "address-level2" ｜ "address-level1" ｜ "country" ｜ "country-name" ｜ "postal-code" ｜ "cc-name" ｜ "cc-given-name" ｜ "cc-additional-name" ｜ "cc-family-name" ｜ "cc-number" ｜ "cc-exp" ｜ "cc-exp-month" ｜ "cc-exp-year" ｜ "cc-csc" ｜ "cc-type" ｜ "transaction-currency" ｜ "transaction-amount" ｜ "language" ｜ "bday" ｜ "bday-day" ｜ "bday-month" ｜ "bday-year" ｜ "sex" ｜ "tel-country-code" ｜ "tel-national" ｜ "tel-area-code" ｜ "tel-local" ｜ "tel-extension" ｜ "impp" ｜ "photo"
默认值	`'off'`

autocorrect

描述	用户在输入/编辑文本值时是否应启用自动更正。
属性	`autocorrect`
类型	`"off" ｜ "on"`
默认值	`'off'`

autofocus

描述	在原生输入元素上设置 `autofocus` 属性。这可能不足以使元素在页面加载时获得焦点。有关详细信息，请参阅管理焦点。
属性	`autofocus`
类型	`布尔值`
默认值	`false`

clearInput

描述	如果为 `true`，则当有值时，输入中会出现一个清除图标。单击它会清除输入。
属性	`clear-input`
类型	`布尔值`
默认值	`false`

clearInputIcon

描述	用于清除按钮的图标。仅在将 `clearInput` 设置为 `true` 时才适用。
属性	`clear-input-icon`
类型	`字符串｜ undefined`
默认值	`undefined`

clearOnEdit

描述	如果为 `true`，则在编辑后焦点获得后，该值将被清除。当 `type` 为 `"password"` 时默认为 `true`，对于所有其他类型则默认为 `false`。
属性	`clear-on-edit`
类型	`布尔值｜ undefined`
默认值	`undefined`

color

描述	要从应用程序的颜色调色板中使用的颜色。默认选项为：`"primary"`、`"secondary"`、`"tertiary"`、`"success"`、`"warning"`、`"danger"`、`"light"`、`"medium"` 和 `"dark"`。有关颜色的更多信息，请参阅主题。
属性	`color`
类型	`"danger" ｜ "dark" ｜ "light" ｜ "medium" ｜ "primary" ｜ "secondary" ｜ "success" ｜ "tertiary" ｜ "warning" ｜字符串｜ undefined`
默认值	`undefined`

counter

描述	如果为 `true`，则字符计数器将显示已使用字符与总字符限制的比率。开发人员还必须设置 `maxlength` 属性才能正确计算计数器。
属性	`counter`
类型	`布尔值`
默认值	`false`

counterFormatter

描述	用于格式化计数器文本的回调。默认情况下，计数器文本设置为 "itemLength / maxLength"。如果您需要从回调中访问 `this`，请参阅 https://ionicframework.cn/docs/troubleshooting/runtime#accessing-this。
属性	`undefined`
类型	`((inputLength: number, maxLength: number) => string) ｜ undefined`
默认值	`undefined`

debounce

描述	设置等待时间（以毫秒为单位），以便在每次按键后触发 `ionInput` 事件。
属性	`debounce`
类型	`数字｜ undefined`
默认值	`undefined`

disabled

描述	如果为 `true`，则用户无法与输入进行交互。
属性	`disabled`
类型	`布尔值`
默认值	`false`

enterkeyhint

描述	浏览器显示哪个 Enter 键的提示。可能的值：`"enter"`、`"done"`、`"go"`、`"next"`、`"previous"`、`"search"` 和 `"send"`。
属性	`enterkeyhint`
类型	`"done" ｜ "enter" ｜ "go" ｜ "next" ｜ "previous" ｜ "search" ｜ "send" ｜ undefined`
默认值	`undefined`

errorText

描述	当检测到错误时，放在输入下方并显示的文本。
属性	`error-text`
类型	`字符串｜ undefined`
默认值	`undefined`

fill

描述	项目的填充。如果为 `"solid"`，则项目将具有背景。如果为 `"outline"`，则项目将是透明的，并带有边框。仅在 `md` 模式下可用。
属性	`fill`
类型	`"outline" ｜ "solid" ｜ undefined`
默认值	`undefined`

helperText

描述	当未检测到错误时，放在输入下方并显示的文本。
属性	`helper-text`
类型	`字符串｜ undefined`
默认值	`undefined`

inputmode

描述	浏览器显示哪个键盘的提示。可能的值：`"none"`、`"text"`、`"tel"`、`"url"`、`"email"`、`"numeric"`、`"decimal"` 和 `"search"`。
属性	`inputmode`
类型	`"decimal" ｜ "email" ｜ "none" ｜ "numeric" ｜ "search" ｜ "tel" ｜ "text" ｜ "url" ｜ undefined`
默认值	`undefined`

label

描述	与输入关联的可见标签。如果您需要渲染纯文本标签，请使用此选项。如果同时使用，`label` 属性将优先于 `label` 插槽。
属性	`label`
类型	`字符串｜ undefined`
默认值	`undefined`

labelPlacement

描述	将标签放置在相对于输入的位置。`"start"`：标签将出现在 LTR 中输入的左侧，在 RTL 中出现在右侧。`"end"`：标签将出现在 LTR 中输入的右侧，在 RTL 中出现在左侧。`"floating"`：当输入获得焦点或具有值时，标签将以较小的尺寸出现在输入上方。否则，它将出现在输入顶部。`"stacked"`：无论输入是否模糊或没有值，标签都将以较小的尺寸出现在输入上方。`"fixed"`：标签的行为与 `"start"` 相同，只是它还具有固定宽度。长文本将使用省略号 ("...") 进行截断。
属性	`label-placement`
类型	`"end" ｜ "fixed" ｜ "floating" ｜ "stacked" ｜ "start"`
默认值	`'start'`

max

描述	最大值，不得小于其最小值（min 属性）。
属性	`max`
类型	`数字｜字符串｜ undefined`
默认值	`undefined`

maxlength

描述	如果 type 属性的值为 `text`、`email`、`search`、`password`、`tel` 或 `url`，则此属性指定用户可以输入的最大字符数。
属性	`maxlength`
类型	`数字｜ undefined`
默认值	`undefined`

min

描述	最小值，必须不大于其最大值（max 属性）。
属性	`min`
类型	`数字｜字符串｜ undefined`
默认值	`undefined`

minlength

描述	如果 type 属性的值为 `text`、`email`、`search`、`password`、`tel` 或 `url`，则此属性指定用户可以输入的最小字符数。
属性	`minlength`
类型	`数字｜ undefined`
默认值	`undefined`

mode

描述	mode 决定使用哪个平台样式。
属性	`mode`
类型	`"ios" ｜ "md"`
默认值	`undefined`

multiple

描述	如果为 `true`，用户可以输入多个值。此属性在 type 属性设置为 `"email"` 时适用，否则将被忽略。
属性	`multiple`
类型	`布尔值｜ undefined`
默认值	`undefined`

name

描述	控件的名称，与表单数据一起提交。
属性	`name`
类型	`字符串`
默认值	`this.inputId`

pattern

描述	值将对其进行检查的正则表达式。模式必须与整个值匹配，而不仅仅是一些子集。使用 title 属性来描述模式以帮助用户。此属性在 type 属性的值为 `"text"`、`"search"`、`"tel"`、`"url"`、`"email"`、`"date"` 或 `"password"` 时适用，否则将被忽略。当 type 属性为 `"date"` 时，`pattern` 仅在不支持原生 `"date"` 输入类型的浏览器中使用。有关更多信息，请参阅 https://mdn.org.cn/en-US/docs/Web/HTML/Element/input/date。
属性	`pattern`
类型	`字符串｜ undefined`
默认值	`undefined`

placeholder

描述	输入具有值之前显示的说明性文本。此属性仅在 `type` 属性设置为 `"email"`、`"number"`、`"password"`、`"search"`、`"tel"`、`"text"` 或 `"url"` 时适用，否则将被忽略。
属性	`placeholder`
类型	`字符串｜ undefined`
默认值	`undefined`

readonly

描述	如果为 `true`，用户无法修改值。
属性	`readonly`
类型	`布尔值`
默认值	`false`

required

描述	如果为 `true`，用户必须在提交表单之前填写值。
属性	`required`
类型	`布尔值`
默认值	`false`

shape

描述	输入的形状。如果为 "round"，则将具有增大的边框半径。
属性	`shape`
类型	`"round" ｜ undefined`
默认值	`undefined`

spellcheck

描述	如果为 `true`，元素将进行拼写和语法检查。
属性	`spellcheck`
类型	`布尔值`
默认值	`false`

step

描述	与 min 和 max 属性一起使用，以限制可以设置值的增量。可能的值为：`"any"` 或正浮点数。
属性	`step`
类型	`字符串｜ undefined`
默认值	`undefined`

type

描述	要显示的控件类型。默认类型为文本。
属性	`type`
类型	`"date" ｜ "datetime-local" ｜ "email" ｜ "month" ｜ "number" ｜ "password" ｜ "search" ｜ "tel" ｜ "text" ｜ "time" ｜ "url" ｜ "week"`
默认值	`'text'`

value

描述	输入的值。
属性	`value`
类型	`null ｜ number ｜ string ｜ undefined`
默认值	`''`

事件

名称	描述	冒泡
`ionBlur`	输入失去焦点时发出。	`true`
`ionChange`	当用户修改输入的值时，会触发 `ionChange` 事件。与 `ionInput` 事件不同，`ionChange` 事件仅在提交更改时才会触发，而不会在用户键入时触发。根据用户与元素交互的方式，`ionChange` 事件会在不同的时刻触发：- 当用户明确提交更改时（例如，通过为 `<ion-input type="date">` 选择日期选择器中的日期、按下“Enter”键等）。- 当元素在值更改后失去焦点时：对于用户交互为键入的元素。此事件不会在以编程方式设置 `value` 属性时发出。	`true`
`ionFocus`	输入获得焦点时发出。	`true`
`ionInput`	每次用户修改输入的值时，都会触发 `ionInput` 事件。与 `ionChange` 事件不同，`ionInput` 事件会为输入值的每次更改而触发。这通常发生在用户键入时的每次按键。对于接受文本输入的元素（`type=text`、`type=tel` 等），接口为 `InputEvent`；对于其他元素，接口为 `Event`。如果输入在编辑时被清除，则类型为 `null`。	`true`

方法

getInputElement

描述	返回底层使用的原生 `<input>` 元素。
签名	`getInputElement() => Promise<HTMLInputElement>`

setFocus

描述	在 `ion-input` 中的原生 `input` 上设置焦点。使用此方法而不是全局 `input.focus()`。希望在页面进入时聚焦输入的开发人员应该在 `ionViewDidEnter()` 生命周期方法中调用 `setFocus()`。希望在叠加层出现时聚焦输入的开发人员应该在 `didPresent` 解析后调用 `setFocus`。有关更多信息，请参阅管理焦点。
签名	`setFocus() => Promise<void>`

CSS 阴影部分

此组件没有可用的 CSS 阴影部分。

CSS 自定义属性

名称	描述
`--background`	输入的背景
`--border-color`	使用帮助文本、错误文本或计数器时，输入下方边框的颜色
`--border-radius`	输入的半径。使用 fill="outline" 时，较大的半径可能会显示不均匀；如果需要，请改用 shape="round" 或增加 --padding-start。
`--border-style`	使用帮助文本、错误文本或计数器时，输入下方边框的样式
`--border-width`	使用帮助文本、错误文本或计数器时，输入下方边框的宽度
`--color`	输入文本的颜色
`--highlight-color-focused`	输入获得焦点时的突出显示颜色
`--highlight-color-invalid`	输入无效时的突出显示颜色
`--highlight-color-valid`	输入有效时的突出显示颜色
`--highlight-height`	输入突出显示的高度。仅适用于 md 模式。
`--padding-bottom`	输入的底部填充
`--padding-end`	如果方向为从左到右，则为输入的右侧填充，如果方向为从右到左，则为左侧填充
`--padding-start`	如果方向为从左到右，则为输入的左侧填充，如果方向为从右到左，则为右侧填充
`--padding-top`	输入的顶部填充
`--placeholder-color`	输入占位符文本的颜色
`--placeholder-font-style`	输入占位符文本的字体样式
`--placeholder-font-weight`	输入占位符文本的字体粗细
`--placeholder-opacity`	输入占位符文本的不透明度

名称	描述
`--background`	输入的背景
`--border-color`	使用帮助文本、错误文本或计数器时，输入下方边框的颜色
`--border-radius`	输入的半径。使用 fill="outline" 时，较大的半径可能会显示不均匀；如果需要，请改用 shape="round" 或增加 --padding-start。
`--border-style`	使用帮助文本、错误文本或计数器时，输入下方边框的样式
`--border-width`	使用帮助文本、错误文本或计数器时，输入下方边框的宽度
`--color`	输入文本的颜色
`--highlight-color-focused`	输入获得焦点时的突出显示颜色
`--highlight-color-invalid`	输入无效时的突出显示颜色
`--highlight-color-valid`	输入有效时的突出显示颜色
`--highlight-height`	输入突出显示的高度。仅适用于 md 模式。
`--padding-bottom`	输入的底部填充
`--padding-end`	如果方向为从左到右，则为输入的右侧填充，如果方向为从右到左，则为左侧填充
`--padding-start`	如果方向为从左到右，则为输入的左侧填充，如果方向为从右到左，则为右侧填充
`--padding-top`	输入的顶部填充
`--placeholder-color`	输入占位符文本的颜色
`--placeholder-font-style`	输入占位符文本的字体样式
`--placeholder-font-weight`	输入占位符文本的字体粗细
`--placeholder-opacity`	输入占位符文本的不透明度

插槽

名称	描述
`end`	在输入的尾部显示的内容。（实验性）
`label`	与输入关联的标签文本。使用 `labelPlacement` 属性来控制标签相对于输入的位置。如果您需要使用自定义 HTML 渲染标签，请使用此方法。（实验性）
`start`	在输入的开头显示的内容。（实验性）

基本用法​

类型​

标签​

标签位置​

标签插槽（实验性）​

无可见标签​

清除选项​

填充输入​

辅助文本和错误文本​

输入计数器​

过滤用户输入​

输入屏蔽​

开始和结束插槽（实验性）​

主题​

颜色​

CSS 自定义属性​

从旧版输入语法迁移​

使用现代语法​

使用旧版语法​

接口​

InputChangeEventDetail​

InputCustomEvent​

属性​

autocapitalize​

autocomplete​

autocorrect​

autofocus​

clearInput​

clearInputIcon​

clearOnEdit​

color​

counter​

counterFormatter​

debounce​

disabled​

enterkeyhint​

errorText​

fill​

helperText​

inputmode​

label​

labelPlacement​

max​

maxlength​

min​

minlength​

mode​

multiple​

name​

pattern​

placeholder​

readonly​

required​

shape​

spellcheck​

step​

type​

value​

事件​

方法​

getInputElement​

setFocus​

CSS 阴影部分​

CSS 自定义属性​

插槽​

内容

基本用法

类型

标签

标签位置

标签插槽（实验性）

无可见标签

清除选项

填充输入

辅助文本和错误文本

输入计数器

过滤用户输入

输入屏蔽

开始和结束插槽（实验性）

主题

颜色

CSS 自定义属性

从旧版输入语法迁移

使用现代语法

使用旧版语法

接口

InputChangeEventDetail

InputCustomEvent

属性

autocapitalize

autocomplete

autocorrect

autofocus

clearInput

clearInputIcon

clearOnEdit

color

counter

counterFormatter

debounce

disabled

enterkeyhint

errorText

fill

helperText

inputmode

label

labelPlacement

max

maxlength

min

minlength

mode

multiple

name

pattern

placeholder

readonly

required

shape

spellcheck

step

type

value

事件

方法

getInputElement

setFocus

CSS 阴影部分

CSS 自定义属性

插槽