# @equinor/fusion-wc-textinput 中文文档

规范地址：https://npmcn.com/package/%40equinor/fusion-wc-textinput/

版本：1\.2\.5
npm 元数据更新时间：2026-10-22T14:38:37.943Z
中文译文更新时间：2026-11-13T20:41:35.861Z
软件包许可：ISC

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40equinor/fusion-wc-textinput
原文对照：https://npmcn.com/package/%40equinor/fusion-wc-textinput/?lang=original
项目主页：https://github.com/equinor/fusion-web-components#readme
源码仓库：https://github.com/equinor/fusion-web-components

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：468 kB，13 个文件
- 模块格式：CommonJS
- TypeScript 类型：包内自带
- 运行依赖：5 个
- 首次发布：2021-06-16T12:42:02.348Z
- 最新版本发布：2026-10-22T14:38:37.407Z
- 近 30 天下载量：5618（2026-10-14 至 2026-11-12，npm 官方下载统计）
- 已发布版本数：54（近 12 个月 6 个）

## 中文简介

\# \[在npm上写出\] (https://img.shields.io/npm/v/@equinor/musion-wc-textinput.svg)\] (https://www.npmjs.com/package/@equinor/musion-wc-textinput) (中文(简体) )

## 安装

```sh
npm install @equinor/fusion-wc-textinput
```

也可以使用：`pnpm add @equinor/fusion-wc-textinput`、`yarn add @equinor/fusion-wc-textinput`、`bun add @equinor/fusion-wc-textinput`

## README

# `<fusion-wc-textinput>` [![Published on npm](https://img.shields.io/npm/v/@equinor/fusion-wc-textinput.svg)](https://www.npmjs.com/package/@equinor/fusion-wc-textinput)

[故事书](https://equinor.github.io/fusion-web-components/?path=/docs/input-textinput)

[材料网络组件](https://github.com/material-components/material-components-web-components/tree/master/packages/textfield)

## 安装

```sh
npm install @equinor/fusion-wc-textinput
```

## 示例使用

```html
<fwc-textinput label='My Label' icon="settings"></fwc-textinput>
```

### 属性/属性

| 名称 | 类型 | 说明 |
| --- | --- | --- |
| `value` | `string` | 输入控制值 . |
| `type` | `TextInputType*` | 指定要渲染的控制类型的字符串 . |
| `variant` | `TextInputVariant**` | 要渲染的输入样式变体 . |
| `label` | `string` | 设置浮动标签值. |
| `placeholder` | `string` | 设置正在消失的输入占位符 . |
| `prefix` | `string` | 输入前要显示的前缀文本 . |
| `suffix` | `string` | 输入后要显示的后缀文本 . |
| `icon` | `IconName***` | 引导图标在输入中显示 。 见 [`fwc-icon`](https://github.com/equinor/fusion-web-components/tree/main/packages/icon)。 。 。 . |
| `iconTrailing` | `IconName***` | 要在输入中显示的跟踪图标 。 见 [`fwc-icon`](https://github.com/equinor/fusion-web-components/tree/main/packages/icon)。 。 。 . |
| `disabled` | `boolean` | 是否应该禁用输入 . |
| `charCounter` | 布尔 | 文本输入 |
| `helper` | `string` | 输入下面显示的帮助文本 。 仅在焦点时显示默认值 . |
| `helperPersistent` | `boolean` | 总是显示帮助文本, 尽管焦点 . |
| `required` | `boolean` | 如果值为空而输入模糊,则显示出错状态. |
| `maxLength` | `number` | 接受输入的最大长度 . |
| `validationMessage` | `string` | 当文本输入无效时, 要在错误颜色中显示的信件 。 (帮助文本不可见) |
| `pattern` | `string` | [`HTMLInputElement.prototype.pattern`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (空字符串将取消设置属性) |
| `min` | `number`|`string` | [`HTMLInputElement.prototype.min`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (空字符串将取消设置属性) |
| `max` | `number`|`string` | [`HTMLInputElement.prototype.max`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (空字符串将取消设置属性) |
| `size` | `number`|`null` | [`HTMLInputElement.prototype.size`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefsize) (无效将取消设置属性) |
| `step` | `number`|`null` | [`HTMLInputElement.prototype.step`](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes) (无效将取消设置属性) |
| `autoValidate` | `boolean` | 报告价值变化的有效性,而不仅仅是模糊性. |
| `validity` | `ValidityState` (只读) | 这个 [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) 文本输入. |
| `willValidate` | `boolean` (只读) | [`HTMLInputElement.prototype.willValidate`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement#Properties) |
| `validityTransform` | `ValidityTransform*****`|`null` | 在每个验证检查前调用回话 。 见 [审定部分](https://npmcn.com/package/%40equinor/fusion-wc-textinput/#readme-Validation) 更多细节. |
| `validateOnInitialRender` | `boolean` | 运行初始渲染的验证检查 . |
| `name` | `string` | 设置 `name` 属性在内部输入上。\*\*\* |

\* 联合国 `TextInputType` 导出于 `fwc-textinput`。 。 。 .

```ts
type TextInputType = 'text'|'search'|'tel'|'url'|'email'|'password'|
    'date'|'month'|'week'|'time'|'datetime-local'|'number'|'color';
```

页:1 `TextInputVariant` 导出于 `fwc-textinput`。 。 。 .

```ts
export type TextInputVariant = 'filled' | 'outlined';
```

页:1 `IconName` 导出于 `fwc-icon`。 。 。 .

```ts
type IconName = keyof typeof edsIcons | string;
```

页:1 `TextInputCharCounter` 导出于 `fwc-textinput`。 。 。 .

```ts
type TextInputCharCounter = 'external' | 'internal';
```

页:1 `ValidityTransform` 导出于 `fwc-textinput`。 。 。 .

```ts
type ValidityTransform = (value: string, nativeValidity: ValidityState) => Partial<ValidityState>
```

\*\*\*\*\*\* 这个 `name` 属性只应用于浏览器自动填充,因为网络组件形式参与目前不考虑 `name` 属性。 见 [289号](https://github.com/material-components/material-components-web-components/issues/289)。 。 。 .

### 方法

| 名称 | 说明 |
| --- | --- |
| `checkValidity() => boolean` | 回返 `true` 如果文字输入通过有效性检查。 回返 `false` 并发射 [`invalid`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/invalid_event) 文本输入中的其他事件.  
**注:** 当访问任何在文本输入初始启动时检查有效性的属性或函数时,您可能必须等待 `<fwc-textinput>.updateComplete`。 。 。 . |
| `reportValidity() => boolean` | 运行 `checkValidity()` 方法,如果返回虚假,则向用户报告输入无效. |
| `setCustomValidity(message:string) => void` | 设置自定义有效性消息( 另覆盖) `validationMessage`) (中文(简体) ). 如果此信件不是空字符串, 那么元素会遇到自定义有效性错误, 而不会验证 . |
| `layout() => Promise<void>` | 重新计算布局. 如果文本输入的样式为 `display:none` 在它被首次制造之前 它的标签是浮起的 然后你必须呼叫 `layout()` 第一次删除 `display:none`,否则标签周围的标记将无法正确渲染. |

### 验证

`<fwc-textinput>` 遵循基础 `<input>` [约束验证模型](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation)。 。 。 . 它揭露:

-   `required`
-   `maxLength`
-   `pattern`
-   `min`
-   `max`
-   `step`
-   `validity`
-   `willValidate`
-   `checkValidity()`
-   `reportValidity()`
-   `setCustomValidity(message)`

此外,它执行更多的特征,例如:

-   `validationMessage`
-   `validateOnInitialRender`
-   财务报告和审定财务报表 `validityTransform`

默认, `<fwc-textinput>` 将报告验证 `blur`。 。 。 .

## 常见问题

### @equinor/fusion-wc-textinput 是什么？

\# \[在npm上写出\] \(https://img\.shields\.io/npm/v/@equinor/musion-wc-textinput\.svg\)\] \(https://www\.npmjs\.com/package/@equinor/musion-wc-textinput\) \(中文\(简体\) \)

### 如何安装 @equinor/fusion-wc-textinput？

在项目目录运行 npm install @equinor/fusion-wc-textinput，或使用 pnpm add / yarn add / bun add。

### @equinor/fusion-wc-textinput 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

### @equinor/fusion-wc-textinput 支持 ESM 还是 CommonJS？

以 CommonJS 形式发布，可以直接 require\(\)；在 ES Module 项目中也可以用 import 引入（Node\.js 会把 module\.exports 作为默认导出）。

### @equinor/fusion-wc-textinput 可以商用吗？

@equinor/fusion-wc-textinput 使用 ISC 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。

### @equinor/fusion-wc-textinput 的下载量有多少？

根据 npm 官方下载统计，@equinor/fusion-wc-textinput 在 2026/10/14 – 2026/11/12 这 30 天内被下载 5,618 次，日均约 187 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @equinor/fusion-wc-textinput 还在维护吗？

最新版本 1\.2\.5 发布于 2026/10/22（22 天前）；至今共发布 54 个版本，其中过去 12 个月发布了 6 个；首次发布于 2021/06/16。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。