---
id: "input"
title: "输入框：宽度、只读与禁用"
category: "输入组件"
document_type: "component-specification"
spec_status: "local-current-draft"
element_ui: "2.15.6"
vue: "2.6.14"
page: "../index.html#spec-input"
source_data: "../component-data.json"
official_components: ["input"]
template_components: ["el-input"]
scenario_count: 14
verification: "scenario-checklist-not-full-test-pass"
---

# 输入框：宽度、只读与禁用

专题 `input` · 输入组件 · Element UI 2.15.6

## 适用范围与组件映射

公共色板及字体基线适用于整个运营后台。本库整理基础组件、组件状态和可复用的组合模式；本轮补齐表单整体验证、页面布局和导航组合；具体业务字段与跨页流程仍在业务场景中说明。专题验收清单包含接入要求，不表示当前示例已实现或已验证全部场景。

官方条目映射：`input`。

本页模板直接使用的 Element UI 标签：`el-input`。

## 通用基线

- 组件库：Element UI **2.15.6**；运行样例 Vue **2.6.14**。
- 系统中文字体：macOS 优先苹方，Windows 通常微软雅黑；工程顺序固定为 `"PingFang SC", "Microsoft YaHei", sans-serif`。不要求安装或加载网络字体，兼容回退不是另一套可选样式。
- 后续仅采用经验证且固定版本的兼容 Element UI 2.x；Element Plus 属于独立迁移路线。
- 正文、数据值、输入及已选值：`14px / 400 / 21px`，`#303133`。
- 表头及组件分组标题：`14px / 600 / 21px`；弹窗标题：`16px / 600 / 24px`，均使用 `#303133`。
- 辅助说明：`12px / 400 / 18px`，`#595959`；错误、链接、状态、禁用与占位按各自语义处理。
- 适用组件的默认尺寸为 `small / 32px`；不得将这一高度机械应用于表格、文本域、浮层等全部组件。
- 规范正文与场景说明使用 `14px / 400 / 24px`、`#303133`，不降成灰蓝小字。
- 筛选文本输入占位统一“请输入”；未选择下拉统一“请选择”；默认全部的下拉显示“全部”。字段标签保留业务含义；日期保留开始/结束语义。
- 次级文字操作（查看更多、编辑、详情、数据中心、更多）：`12px / 400 / 18px`，`#3377BB`；保留点击热区。
- 本规范库的深色目录、蓝色展示区属于文档排版，不是业务组件颜色或业务导航规范。

## 本页用法与分类

默认用法：普通短文本默认使用有独立标签的单行输入框，32px高、直角；密码、单位和字数限制只在字段需要时增加，正文样式保持统一。 宽度由字段所在内容列及本页宽度规则决定，不把所有输入统一写死为一个宽度。

| 区分什么 | 本页内容 | 选用或触发条件 |
| --- | --- | --- |
| 输入内容（用途） | 普通文本、密码和带单位的内容是不同字段用途。 | 普通文字用普通输入；密码用密码显隐；有单位时用复合输入，不因外观偏好改字段类型。 |
| 宽度（布局约束） | 字段整项、控件边框和容器可用宽度是三个不同数值。 | 普通筛选整项280px；金额范围整项576px；时间范围控件400px；编辑表单填满内容列，新增账号内容列上限400px。按实际用途采用，不能当四种任意可选皮肤。 |
| 附属功能（可组合） | 清除、搜索图标、单位和字数计数是输入功能。 | 本页分别演示这些功能；按字段任务启用，不要求所有输入同时具备。删除整项字段另按危险操作处理。 |
| 编辑权限（约束） | 可编辑、只读和禁用取决于当前是否允许修改。 | 允许修改用可编辑；只查看且需复制用只读；当前不可操作才禁用，不能为了文字变浅而禁用。 |
| 焦点与校验（自动状态） | 聚焦、错误和错误恢复由操作及校验结果产生。 | 本页必填示例失焦后检查非空；错误红边优先于蓝色焦点边，纠正后恢复，不由设计者任选颜色。 |

使用边界：不要把错误、只读、禁用当成三款皮肤；不要把清空输入值与删除整个字段混为一项操作。

## 组件规则

- **INPUT-R01**：有独立标签；占位提示 默认“请输入”；默认 32px，输入值 #303133、14px / 400。错误说明不写进 占位提示。
- **INPUT-R02**：输入 / 清除 / 失焦 / 回车键 的响应由宿主定义；组件本身不暗中提交或发起查询。输入法候选阶段 回车键 不提交。
- **INPUT-R03**：只读可选择与复制，禁用不可编辑；可清除输入保留 清除 按钮名称和点击热区。
- **INPUT-R04**：【宽度口径】本页是输入族宽度规则的统一来源。控件宽度指最外层边框到边框的CSS像素，包含内距、图标和前后缀；字段整项宽度还包含标签及标签间距。两种宽度不能混写，32px等高度档位也不决定宽度。
- **INPUT-R05**：【先定内容列】新增/编辑表单中的输入、下拉、密码、文本域及组合输入默认填满所在内容列；同组左缘、右缘保持一致。当前新增账号场景内容列最大400px，窄容器随可用宽度收缩；400px是该表单的既有上限，不强制推广到所有页面和弹窗。
- **INPUT-R06**：【普通筛选项】沿用现有筛选合同：普通字段整项280px，包含实际标签文字宽度、8px标签间距和剩余输入空间；框本身不写成280px。字段间横向16px、纵向12px，放不下时整项换行；容器小于整项宽度时最多占满容器。新增/编辑表单的独立标签列不套筛选标签规则。
- **INPUT-R07**：【范围筛选项】双输入金额范围整项576px，包含标签、8px标签间距、两框与中间分隔；日期/日期时间范围的控件边框宽400px，不含标签，整项为实际标签宽+8px+400px。日期规则已替代旧的日期整项576px，不与金额范围混用。
- **INPUT-R08**：【短数字与长内容】位数和范围明确的短计数允许沿用现有有限宽步进框：本页0–10示例沿用常规组件130px外框，增减按钮计入宽度；这不是所有金额或数字的统一宽度。长账号、链接、地址不随字数横向撑开容器；单行保留编辑滚动与完整值读取，多行备注在内容列内换行。
- **INPUT-R09**：【组合与弹层】前后缀、单位、按钮、清除图标和字数计数都计入组合控件总宽，不能在既定宽度之外另加。单选、多选、自动补全与级联的触发框沿用所在内容列，候选弹层的宽度和长选项处理由对应组件规定。
- **INPUT-R10**：【窄容器与稳定性】先让字段整项换行；仍不足时收缩至可用宽度，必要时标签置于上方，金额两端或日期起止值按各自规则分行。字体、图标和命中区域不缩小，完整时间不省略。默认、聚焦、错误、只读、禁用和清除按钮显隐均不改变已分配宽度；错误文字在同一内容列内换行。
- **INPUT-R11**：【公共用色】颜色仅从公共色值 引用：主色系 3 个基础色值、辅助功能色 3 个、中性色 10 个，共 16 个基础色值。角色可以多个，实际色值复用；不为每个组件、悬停 或不同字段再新增近似颜色。透明效果仅限遮罩 35% 与阴影 12%，从 外壳深色 派生。
- **INPUT-R12**：【统一字体】统一系统中文字体：macOS 优先苹方（PingFang SC），Windows 通常使用微软雅黑（Microsoft YaHei）；工程顺序固定为 "PingFang SC", "Microsoft YaHei", sans-serif。使用设备已有字体，不要求安装或加载网络字体；最后一项仅作兼容回退，不是供页面作者任选的另一套样式。正文 14px/400/21px；表头与分组标题 14px/600/21px，弹窗标题 16px/600/24px；次级文字操作和辅助说明 12px/400/18px。正文与标题同用 #303133；不通过额外加粗或透明度改变正文轻重。
- **INPUT-R13**：【可编辑 / 已填写】白底 白色、正文 正文深灰、边框 边框灰；能输入不等于用主色填满。
- **INPUT-R14**：【悬停 / 聚焦】悬停保持 边框灰；鼠标与键盘聚焦均只将现有 1px 边框改为 主题蓝，不增加外圈、阴影或第二层框。
- **INPUT-R15**：【错误 / 错误聚焦】边框 错误红；说明 错误红 + 明确错误文案，错误边框优先于蓝色聚焦边框，不叠加第二层外框。
- **INPUT-R16**：【只读 / 禁用】只读 白底、正文深灰、边框灰，可选择复制；禁用 浅灰底、禁用灰文字、边框灰，不响应操作。
- **INPUT-R17**：【占位 / 加载】占位 禁用灰，标签仍用 正文深灰；加载图标 主题蓝，值仍 正文深灰，不把值改成占位灰。
- **INPUT-R18**：【组件边界】仅使用实际存在的组件状态；没有操作能力的内容不添加悬停、选中或禁用变色。
- **INPUT-R19**：【叠加优先级】状态叠加规则：禁用阻断交互；输入类控件错误边框覆盖蓝色聚焦边框；输入框不叠加外圈或阴影，其他无边框操作保留键盘焦点提示；选中底覆盖悬停底；只读不等于禁用；加载不等于成功；业务启用/停用的文字结果不等于控件是否可点击。
- **INPUT-R20**：输入及选择触发框统一单层矩形：默认 白色 底、正文深灰 14px/400 字、禁用灰 占位、边框灰 边框；聚焦仅原边框 主题蓝，错误 错误红。鼠标点击与键盘进入均不新增外框或阴影。范围日期仅外层容器变边框，内部两个输入不重复画框。
- **INPUT-R21**：输入类反馈成组同步：普通聚焦仅原边框改为主题蓝，普通说明保持辅助深灰；校验失败时边框与就近错误短提示使用错误红，若配置错误图标也同步使用错误红。错误清除时相关视觉与 aria-invalid 一起恢复；不能仅因聚焦就报错，禁用后不触发新校验。当前基础示例不强制增加错误图标，错误含义必须有文字表达。
- **INPUT-R22**：下方提示通过 aria-describedby 关联输入；错误状态同步 aria-invalid，动态提示使用 aria-live。
- **INPUT-R23**：输入族统一直角 0px：普通输入、密码、文本域、自动补全、单选/多选触发框、级联、日期/时间与范围、数字输入及前后缀组合输入；默认/聚焦/错误/只读/禁用均不改变圆角。组合输入外侧和拼接处均不保留小圆角，弹出面板的圆角由面板规范独立定义。
- **INPUT-R24**：危险文字操作单独规定样式与交互：用于表单右侧删除、移除待上传附件、列表行删除等。默认红字 #F56C6C、12px/400，无底色、无边框、无水平内边距；点击区域至少24px高。悬停和按下保持同一红色并加下划线，键盘进入时显示红色焦点提示。禁用用 #C0C4CC 且不可执行；处理中显示原位进度并阻止重复点击。
- **INPUT-R25**：删除、移除统一先打开居中确认弹窗，明确对象、数量和后果；确认按钮统一写“确认”，取消不改变数据。未保存项、待上传附件、已保存记录和批量删除都沿用这一入口规则；失败保留原内容和重试入口。普通清空输入、取消筛选或关闭弹层不是删除，不自动标红。
- **INPUT-R26**：条件改变后，只让当前有效分支参与校验与提交；隐藏或禁用的字段不能带着旧值误提交。各分支草稿分别保留，切换时清除过期错误；清除整组时一并清除草稿。
- **INPUT-R27**：复合输入的前置选择、后置单位或按钮计入整个输入组件的宽度上限；拼接处直角且同高，错误显示在原输入边框及就近提示，不给组合外再套一层焦点框。
- **INPUT-R28**：填写区只保留影响操作的格式、限制、必填或错误说明；不逐字段重复“本地演示、不代表正式数据”等提示。原型数据保存范围、接口与未接入能力集中记录在规范文档，不写进业务操作文案。

## 场景与验收清单

以下为需核对的场景组；`[ ]` 不代表已经测试通过。

- [ ] **INPUT-S01**：按实际能力核对普通文本、密码可见性、前后缀图标，以及前置与后置内容组成的复合输入；前置内容插槽（prepend）与后置内容插槽（append）沿用输入框状态。
- [ ] **INPUT-S02**：功能核对：清除与字数限制；权限核对：只读与禁用；校验核对：错误与纠正恢复。三类分别验收，不视为并列的可选样式。
- [ ] **INPUT-S03**：输入法组合中 回车键、前后空格、全角字符、粘贴超长值；禁止自动改写有意义输入
- [ ] **INPUT-S04**：本页核对普通、聚焦、只读、禁用与必填错误的公共色值；错误边框和提示同时保持，错误再次聚焦不变蓝。文本框不套列表行选中或半选规则。
- [ ] **INPUT-S05**：核对正文14/400、次级操作12/400、标题600及同色深正文；检查实际弹出层和子 span，不能只检查父元素。
- [ ] **INPUT-S06**：验证完整反馈组合：默认→聚焦→失败→再次聚焦→有效纠正→恢复；检查边框、提示、图标和 aria-invalid 一起变化。
- [ ] **INPUT-S07**：检查输入族四角及组合拼接处为0px，包含默认、聚焦、错误、禁用和只读状态。
- [ ] **INPUT-S08**：核对红色文字删除：无框无底、12px/400、悬停、键盘、禁用、处理中；子文字不能被普通蓝链接样式覆盖。
- [ ] **INPUT-S09**：本页只核对未保存字段的居中确认、取消保留、确认移除和撤销。待上传附件到上传专题、已保存记录及失败重试到确认框专题验收；入口颜色不代替确认流程。
- [ ] **INPUT-S10**：宽度口径：分别测量整项、标签、8px间距及控件最外框；普通字段280px不误写成输入边框宽280px。
- [ ] **INPUT-S11**：宽度来源：金额整项576px；日期/日期时间范围控件400px不含标签；新增账号内容列最大400px。旧日期576px规则不再采用。
- [ ] **INPUT-S12**：当前宽度示例：宽容器可并列，窄容器280px时字段换行，表单内容列与组合输入随容器收缩；130px短计数例只用于0–10。
- [ ] **INPUT-S13**：状态几何：输入文字、清除、聚焦、失焦校验错误、纠正、只读和禁用均保持同一已分配宽度；长错误说明在框下换行。
- [ ] **INPUT-S14**：接入验收：160%/200%缩放、窄弹窗、长账号/地址、金额极值与完整秒值；同组左右缘一致，没有页面级横向溢出，不通过缩字解决。

### 专题验收重点

输入中文、粘贴长文本、制表键 聚焦；只读与禁用行为不同。 核对宽度示例的实测边框：普通筛选整项280px但输入框扣除标签和8px间距，金额整项576px；编辑内容列最大400px，组合前后缀计入。切换宽/窄容器后值不丢、整项换行、不横向撑开；聚焦、清空、错误、只读、禁用均不跳宽。

## 当前示例模板

以下来自本专题的结构化示例，使用 Vue 2 模板语法。`v-model`、事件方法、数据列表等依赖 [components.js](../components.js)；完整样式文件及加载顺序见 [通用基线](FOUNDATIONS.md)。自定义组合标签的内部实现由下方依赖文件提供，不能仅复制标签作为完整组件。

```html
<div class="token-strip">
<span>常规高度 <b>32 px</b>
</span>
<span>输入文字 <b>#303133</b>
</span>
<span>字号 / 字重 <b>14 / 400</b>
</span>
<span>焦点边框 <b>#409EFF</b>
</span>
</div>
<section class="specimen-block" id="input-section-1">
<div class="specimen-heading">
<h4>
<span class="section-number">01</span>编辑权限与校验状态</h4>
<span>标签始终可见；占位提示不代替标签</span>
</div>
<div class="specimen-stage">
<div class="input-showcase">
<label>普通输入<el-input v-model="inputText" aria-describedby="input-normal-help" placeholder="请输入" clearable label="普通输入">
</el-input>
<small id="input-normal-help">可输入、可清除</small>
</label>
<label>只读输入<el-input value="可选中并复制" aria-describedby="input-readonly-help" readonly label="只读输入">
</el-input>
<small id="input-readonly-help">保留读取与复制能力</small>
</label>
<label>禁用输入<el-input value="当前不可操作" aria-describedby="input-disabled-help" disabled label="禁用输入">
</el-input>
<small id="input-disabled-help">当前状态下不可编辑</small>
</label>
<label :class="{'input-is-error':requiredError}">
<span class="required-label-text">
<span class="required-mark" aria-hidden="true">*</span>必填校验</span>
<el-input aria-required="true" v-model="requiredText" :aria-invalid="requiredError ? 'true' : 'false'" aria-describedby="input-studio-help" @input="requiredError=requiredError &amp;&amp; !requiredText.trim()" @blur="requiredError=!requiredText.trim()" placeholder="输入后移出焦点" label="必填校验">
</el-input>
<small id="input-studio-help" aria-live="polite" :class="{danger:requiredError}">{{requiredError ? '请输入内容' : '失焦时校验必填内容'}}</small>
</label>
</div>
</div>
</section>
<section class="specimen-block" id="input-section-2">
<div class="specimen-heading">
<h4>
<span class="section-number">02</span>按内容选择输入功能</h4>
<span>同一输入基础，适配不同内容</span>
</div>
<div class="specimen-stage">
<div class="input-showcase">
<label>密码<el-input v-model="demoPassword" placeholder="请输入密码" show-password label="密码">
</el-input>
</label>
<label>前缀图标<el-input prefix-icon="el-icon-search" v-model="demoSearch" placeholder="搜索内容" label="搜索内容">
</el-input>
</label>
<label>复合输入<el-input v-model="demoComposite" placeholder="请输入" label="复合输入">
<template slot="append">单位</template>
</el-input>
</label>
<label>字数限制<el-input v-model="demoLimit" placeholder="最多输入 20 字" maxlength="20" show-word-limit label="字数限制">
</el-input>
</label>
</div>
</div>
</section>
<section class="specimen-block">
<div class="specimen-heading">
<h4>表单右侧删除</h4>
<span>删除字段是危险文字操作，不等同于清空输入值</span>
</div>
<div class="specimen-stage">
<danger-action-demo mode="draft">
</danger-action-demo>
</div>
</section>
<section class="specimen-block" id="input-width-rules">
<div class="specimen-heading">
<h4>
<span class="section-number">03</span>宽度规则与可用空间</h4>
<span>区分字段整项宽度和输入框实际宽度</span>
</div>
<div class="specimen-stage">
<input-width-patterns>
</input-width-patterns>
</div>
</section>
```

## 交付与使用边界

- 规范条款、示例代码与待验收场景分开理解；有示例不等于已覆盖所有样式、交互状态和使用场景。
- 业务接口、权限、时区、金额精度、数据规模等依赖应从实际项目读取，不使用演示值代替生产约定。
- 发生样式或文案变更时，同步专题数据、页面与 Markdown，避免规范和样例分离。

## 来源与关联

- 来源线索：历史样板规范 35 / 73；宽度沿用项目已确认的scene-consistency.css筛选280px/金额576px/时间范围400px、account-create.css内容列400px及当前Element常规步进框130px；交互示例input-width-patterns.js/css。。
- [打开本专题页面](../index.html#spec-input)
- [通用基线](FOUNDATIONS.md)
- [规范总索引](README.md)
- [结构化规范数据](../component-data.json)（记录 id：`input`）
- [原始历史样板](../original-20260621.html)
- [历史规范条目](../spec-notes.json)

自定义示例 `danger-action-demo` 的实现：[danger-actions.js](../danger-actions.js)。

自定义示例 `input-width-patterns` 的实现：[input-width-patterns.js](../input-width-patterns.js)。

危险操作样式见 [action-contract.css](../action-contract.css)；示例使用本地演示数据。

## 本组件颜色状态表

| 状态 / 条件 | 统一规则 |
| --- | --- |
| 可编辑 / 已填写 | 白底 白色、正文 正文深灰、边框 边框灰；能输入不等于用主色填满。 |
| 悬停 / 聚焦 | 悬停保持 边框灰；鼠标与键盘聚焦均只将现有 1px 边框改为 主题蓝，不增加外圈、阴影或第二层框。 |
| 错误 / 错误聚焦 | 边框 错误红；说明 错误红 + 明确错误文案，错误边框优先于蓝色聚焦边框，不叠加第二层外框。 |
| 只读 / 禁用 | 只读 白底、正文深灰、边框灰，可选择复制；禁用 浅灰底、禁用灰文字、边框灰，不响应操作。 |
| 占位 / 加载 | 占位 禁用灰，标签仍用 正文深灰；加载图标 主题蓝，值仍 正文深灰，不把值改成占位灰。 |
| 危险文字操作 | 查看、编辑、查看更多使用操作蓝；删除、移除使用危险红。字号同为12px/400，颜色表达动作类型，不通过加粗或更大字号表达危险。 |

仅使用实际存在的组件状态；没有操作能力的内容不添加悬停、选中或禁用变色。

[公共颜色与字体 token](../color-tokens.json) · [公共组件样式](../color-contract.css) · [系统字体合同（最后加载）](../font-contract.css)

## 业务落地场景

- [会员列表 · 会员账号等筛选字段；详情内可编辑字段](../../showcase/index.html#members) · [场景文档](../../showcase/docs/members.md)
- [会员详情 · 详情字段旁编辑入口 · 输入值](../../showcase/index.html#member-detail) · [场景文档](../../showcase/docs/member-detail.md)
- [新增账号 · 新增会员账号、密码等输入字段](../../showcase/index.html#create-account) · [场景文档](../../showcase/docs/create-account.md)
- [人群标签 · 标签目录搜索和穿梭框账号搜索](../../showcase/index.html#segments) · [场景文档](../../showcase/docs/segments.md)
- [存款记录 · 存款记录筛选输入](../../showcase/index.html#deposits) · [场景文档](../../showcase/docs/deposits.md)
- [账户调整审核 · 筛选账号、申请单号等输入](../../showcase/index.html#account-audit) · [场景文档](../../showcase/docs/account-audit.md)
- [活动管理 · 活动筛选、名称与标题](../../showcase/index.html#campaigns) · [场景文档](../../showcase/docs/campaigns.md)
- [广告管理 · 广告筛选、标题与链接](../../showcase/index.html#adverts) · [场景文档](../../showcase/docs/adverts.md)
- [公告管理 · 公告筛选、标题和内容输入](../../showcase/index.html#notifications) · [场景文档](../../showcase/docs/notifications.md)
- [通知管理 · 通知标题、账号与筛选输入](../../showcase/index.html#site-messages) · [场景文档](../../showcase/docs/site-messages.md)
- [操作日志 · 日志账号、操作内容等筛选输入](../../showcase/index.html#logs) · [场景文档](../../showcase/docs/logs.md)
- [个人中心 · 个人资料与安全设置表单](../../showcase/index.html#personal-center) · [场景文档](../../showcase/docs/personal-center.md)
- [客服工单管理 · 工单筛选、标题及会员账号](../../showcase/index.html#tickets) · [场景文档](../../showcase/docs/tickets.md)

[竞品组件拆解](../../reference-review/竞品组件反推规范.html) · [业务场景分类](../../业务场景分类清单.md)