Angular CDK text-field 指南textarea 自动高度调整与 input 自动填充Autofill状态监听【免费下载链接】componentsComponent infrastructure and Material Design components for Angular项目地址: https://gitcode.com/GitHub_Trending/co/components本文围绕 Angular CDK 中text-field包源码位于 src/cdk/text-field展开深入讲解两个高频实用能力如何让textarea随内容自动调整高度cdkTextareaAutosize以及如何监听、样式化input的浏览器自动填充状态AutofillMonitor/cdkAutofill。读完本文你将掌握这两个能力的完整用法、可用的 CSS mixin 与 API 细节并了解其底层实现原理可直接落地到自己的 Angular 项目中。text-field包专为input、textarea等文本输入元素提供实用工具它不依赖 Angular MaterialCDK 使用者可直接引入。包的公共 API 由 public-api.ts 统一导出包括AutofillMonitor、CdkAutofill、CdkTextareaAutosize与TextFieldModule。引入模块使用前需要引入TextFieldModule定义于 text-field-module.ts内部导入了CdkAutofill与CdkTextareaAutosize两个指令并导出import {TextFieldModule} from angular/cdk/text-field; Component({ selector: my-app, imports: [TextFieldModule], // 或加入 NgModule 的 imports ... }) export class MyApp {}在组件模板中即可直接使用cdkTextareaAutosize与cdkAutofill两个指令。让textarea自动调整高度基本用法与行数约束将cdkTextareaAutosize指令应用于任意textarea即可使其高度随内容自动伸缩textarea cdkTextareaAutosize/textarea默认情况下指令允许高度无上限地增长可滚动区域内完全展开。你可以通过两个输入属性限制展开的边界cdkAutosizeMinRows最小行数。内容少于该行数时textarea 至少保持这么多行的高度cdkAutosizeMaxRows最大行数。内容超过该行数后textarea 高度不再增长转而出现内部滚动条。textarea cdkTextareaAutosize cdkAutosizeMinRows2 cdkAutosizeMaxRows5/textarea从源码看这两个属性在 setter 中通过coerceNumberProperty将输入强转为数值支持模板字符串绑定并分别调用_setMinHeight/_setMaxHeight将计算出的minHeight/maxHeight以内联样式写入元素见 autosize.ts 与 autosize.tsInput(cdkAutosizeMinRows) set minRows(value: NumberInput) { this._minRows coerceNumberProperty(value); this._setMinHeight(); } Input(cdkAutosizeMaxRows) set maxRows(value: NumberInput) { this._maxRows coerceNumberProperty(value); this._setMaxHeight(); }高度换算基于“单行高度”line height缓存指令会克隆一个隐藏的 textarea 副本测量其clientHeight作为单行高度再乘以minRows/maxRows得到像素值。该克隆副本使用position: absolute、visibility: hidden、清空 border/padding/height 等样式避免影响页面布局见 autosize.ts。程序化触发重算resizeToFitContent(force)自动调整逻辑可以通过方法resizeToFitContent程序化触发。该方法接受一个可选布尔参数force默认值为false传true时即使文本内容没有变化也会强制重算高度——当影响 textarea 的外部样式如字号、字体、宽度或媒体查询发生变化时非常有用不传或传false时指令会比较当前值与上次记录值_previousValue以及minRows_previousMinRows内容未变化则直接跳过计算避免不必要的布局开销见 autosize.ts。import {CdkTextareaAutosize, TextFieldModule} from angular/cdk/text-field; import {afterNextRender, Component, inject, Injector, ViewChild} from angular/core; Component({ selector: my-app, template: textarea cdkTextareaAutosize #autosizecdkTextareaAutosize/textarea button (click)triggerResize()重新计算高度/button , imports: [TextFieldModule], }) export class MyApp { private _injector inject(Injector); ViewChild(autosize) autosize!: CdkTextareaAutosize; triggerResize() { // 等视图渲染完成后强制触发一次高度重算 afterNextRender(() { this.autosize.resizeToFitContent(true); }, {injector: this._injector}); } }指令本身以exportAs: cdkTextareaAutosize暴露因此模板中可以通过#autosizecdkTextareaAutosize拿到实例引用。以上模式与官方示例 text-field-autosize-textarea-example.ts 一致。高度计算的两处细节占位符与测量类占位符高度缓存如果设置了placeholder指令会临时把 textarea 的value设为占位符文本、测量其scrollHeight并缓存_cacheTextareaPlaceholderHeight。最终高度取max(scrollHeight, 缓存占位符高度)从而保证文本内容比占位符短时textarea 至少能完整展示占位符见 autosize.ts。对应的测试见 autosize.spec.tsshould keep the placeholder size if the value is shorter than the placeholder。测量类measuring class真实测量时指令会临时给 textarea 添加cdk-textarea-autosize-measuring类Firefox 下使用cdk-textarea-autosize-measuring-firefox将高度设为 auto、强制overflow: hidden以排除滚动条干扰读取scrollHeight后立即移除。测量类额外带了 2px 上下 padding_autosize-measuring-basemixin因此最终结果会减去 4px 补偿见 autosize.ts。Firefox 单独使用一类是因为 Firefox 存在修改overflow会破坏撤销/重做undo/redo的已知问题相关样式见 _index.scss。关闭与重置自动调整cdkTextareaAutosize指令本身是一个布尔输入传false可关闭自动调整此时调用resizeToFitContent直接跳过见 autosize.ts指令还提供reset()方法可把高度恢复为初始ngAfterViewInit时记录的原始height值见 autosize.ts。此外指令在宿主上默认设置rows1浏览器默认通常显示两行此设置让minRows绑定从 1 行起算并监听window的resize事件——窗口尺寸变化后清空行高/占位符缓存并强制重算通过auditTime(16)节流见 autosize.ts以应对媒体查询等响应式样式。监听input的自动填充状态浏览器会自动填充autofill表单输入框但原生没有直接暴露“当前是否被自动填充”的 API。CDK 借助 CSS 动画事件巧妙地实现了这一能力。通过 AutofillMonitor 服务监听AutofillMonitor是一个可注入的服务源码见 autofill.ts。核心 APImonitor(element)传入要监听的元素接受Element或ElementRefElement返回ObservableAutofillEvent。事件对象包含两个属性target自动填充状态发生变化的元素isAutofilled当前是否处于自动填充状态boolean。stopMonitoring(element)停止监听。任何被监听的元素最终都应该调用该方法解除监听否则会持续占用监听资源。import {AfterViewInit, Component, ElementRef, OnDestroy, ViewChild, inject} from angular/core; import {AutofillMonitor} from angular/cdk/text-field; Component({ selector: my-app, template: mat-form-field mat-label姓/mat-label input matInput #lastName / /mat-form-field , }) export class MyApp implements AfterViewInit, OnDestroy { private _autofill inject(AutofillMonitor); ViewChild(lastName, {read: ElementRef}) lastName!: ElementRefHTMLElement; lastNameAutofilled false; ngAfterViewInit() { this._autofill .monitor(this.lastName) .subscribe(e (this.lastNameAutofilled e.isAutofilled)); } ngOnDestroy() { this._autofill.stopMonitoring(this.lastName); } }服务内部为每个元素维护一个Subject见MonitoredElementInfo同一元素重复调用monitor会返回同一个流ngOnDestroy时服务会自动停止对剩余所有元素的监听防止泄漏见 autofill.ts。完整示例可参考 text-field-autofill-monitor-example.ts。通过 cdkAutofill 指令简化流程为了省去手动monitor/stopMonitoring的样板代码CDK 还提供了cdkAutofill指令见 autofill.ts它会在ngOnInit时自动开始监听ngOnDestroy时自动解除监听同时作为Output绑定在自动填充状态变化时发出事件事件类型同为AutofillEvent含target与isAutofilled。input (cdkAutofill)onAutofill($event) /import {Component} from angular/core; import {AutofillEvent, TextFieldModule} from angular/cdk/text-field; Component({ selector: my-app, template: input (cdkAutofill)onAutofill($event) placeholder邮箱 / , imports: [TextFieldModule], }) export class MyApp { autofilled false; onAutofill(event: AutofillEvent) { this.autofilled event.isAutofilled; } }官方示例 text-field-autofill-directive-example.ts 展示了用该指令同时监控两个输入框的写法。工作原理动画事件 CSS 类AutofillMonitor的底层原理实现参照了 brunn 的检测方法monitor调用时给元素添加cdk-text-field-autofill-monitored类通过渲染器在元素上监听animationstart事件以passive: true选项注册当浏览器触发自动填充时:-webkit-autofill匹配导致预先定义好的cdk-text-field-autofill-start动画空 keyframes时长 0s启动animationstart事件随之触发事件处理函数检查event.animationName若为cdk-text-field-autofill-start且元素尚不含cdk-text-field-autofilled类 → 添加该类并发出{target, isAutofilled: true}若为cdk-text-field-autofill-end且元素含该类 → 移除该类并发出{target, isAutofilled: false}。事件回调在NgZone.run中执行确保 Angular 变更检测正常触发见 autofill.ts。检查 CSS 类是为了过滤掉元素初始渲染时此时尚未添加监听类触发的动画事件避免误报。前提必须引入 autofill 结构样式该服务依赖一段 CSS 来安装动画钩子缺少这段样式时动画事件不会触发监听将失效如果你在使用 Angular Material这段 CSS 已包含在mat-coremixin 中无需额外引入如果未使用 Angular Material需要在全局样式中通过text-field-autofillmixin 引入use angular/cdk; include cdk.text-field-autofill();该 mixin 定义了空 keyframescdk-text-field-autofill-start/cdk-text-field-autofill-end并让被监听元素在:-webkit-autofill命中与否时分别触发对应动画Chrome 80 起需要 1ms 延迟否则animationstart不会触发详见 _index.scss。说明新版本 CDK 中cdkTextareaAutosize与AutofillMonitor在使用时已通过内部的_CdkTextFieldStyleLoader见 text-field-style-loader.ts自动加载结构性样式如去掉拖拽手柄、测量类等。但text-field-autofillmixin 涉及的关键帧动画属于“功能性钩子”样式官方文档仍明确要求在全局样式层手动引入或依赖 Material 的mat-core。样式化自动填充状态的input问题背景难以覆盖浏览器默认填充样式当input被自动填充时Chrome 等浏览器会以高亮黄色背景等-webkit-autofill默认样式覆盖元素且直接通过常规 CSS 设置background/color往往无法生效开发者难以覆盖。CDK 提供了专门的 mixin 来解决这一痛点。使用 text-field-autofill-color mixintext-field-autofill-colormixin 用于设置自动填充输入框的背景与文字颜色第一个参数background背景色必填第二个参数color文字颜色可选。use angular/cdk; // 示例自定义自动填充输入框 —— 无背景、红色文字 input.custom-autofill { include cdk.text-field-autofill-color(transparent, red); }实现原理mixin 会为每次调用生成一个唯一命名通过全局计数器$autofill-color-frame-count的 keyframes 动画将最终帧设置为目标background与color并把它以both填充模式应用在:-webkit-autofill选择器上当元素同时被cdk-text-field-autofill-monitored监听时还会与监听动画cdk-text-field-autofill-start组合使用见 _index.scss。动画的both填充模式会持续保持最终帧样式从而“压过”浏览器默认的 autofill 样式。相关的 autosize 结构样式同文件中还提供text-field-autosizemixin在自动调整高度的 textarea 上移除resize拖拽手柄并定义前述测量类以及一个已标记deprecated的text-field聚合 mixin等价于同时引入 autosize 与 autofill 两部分见 _index.scss。测试与验证仓库为这两个功能提供了完整的单元测试可作为行为契约参考autosize.spec.ts覆盖“textarea 随内容增长且高度等于 scrollHeight”“占位符比内容长时保持占位符高度”“minRows 决定最小高度”“minRows 减小后高度重新计算”等场景autofill.spec.ts 与 autofill.zone.spec.ts覆盖自动填充状态变化的发出、停止监听、事件载荷结构以及 zone 相关行为。官方交互式示例同样可在仓库中找到text-field-autosize-textarea、text-field-autofill-monitor、text-field-autofill-directive三个示例组件位于 src/components-examples/cdk/text-field。小结text-field包用极简的 API 解决了两个日常开发中的“脏活”能力核心 API关键注意点textarea 自动高度cdkTextareaAutosizecdkAutosizeMinRows/cdkAutosizeMaxRows、resizeToFitContent(force)、reset()样式变化时传force: true强制重算placeholder 会影响最小高度自动填充状态监听AutofillMonitor.monitor / stopMonitoring、cdkAutofill指令必须引入text-field-autofillmixin或用 Angular Material 的mat-core监听结束务必解除自动填充样式定制text-field-autofill-color(background, color)mixin通过 keyframes 动画覆盖浏览器默认 autofill 样式两者配合可以打造出交互体验与视觉风格统一的表单输入组件。以上用法均以本仓库当前实现为准CDK 新版本中指令为独立、基于inject()的写法可直接在 standalone 组件中导入使用。【免费下载链接】componentsComponent infrastructure and Material Design components for Angular项目地址: https://gitcode.com/GitHub_Trending/co/components创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考