Angular中如何让输入框自适应内部文本内容？

嘿，想要让Angular Material的输入框自动适配里面的文本宽度是吧？我给你整理了两种靠谱的方法，你可以根据自己的场景选：

方法一：纯CSS快速实现（适合静态文本场景） #

如果你的输入框内容是固定不变的（比如disabled的那个），用CSS就能搞定，不用写JS逻辑：

首先在组件的样式文件里添加这些样式：

/* 让mat-form-field不再强制占满父容器宽度 */
.mat-form-field {
  display: inline-block;
  width: auto;
  margin-right: 8px; /* 可选：加一点右边距，避免和其他元素挤在一起 */
}

/* 让输入框本身适配文本宽度 */
.mat-input-element {
  width: auto;
  min-width: fit-content;
}

这种方法简单快捷，但如果输入框内容是动态变化的（比如可编辑的那个），CSS可能没法实时响应宽度变化，这时候就需要用下面的方法。

方法二：结合TypeScript动态计算（支持动态内容） #

这种方法会实时计算文本的实际宽度，然后给输入框设置对应的宽度，不管内容怎么变都能适配：

第一步：修改模板，给输入框加模板引用变量 #

给需要自适应的输入框加上#开头的引用变量，方便在TS里获取DOM元素：

<mat-card>
  <fieldset>
    <legend>qwerty</legend>
    <div>
      <div>
        <label>Qwerty Asdf</label>
        <mat-form-field>
          <input #staticInput matInput disabled="true" name="type" value="qwerty" />
        </mat-form-field>
      </div>
      <div>
        <label>Foo Bar</label>
        <mat-form-field>
          <input #editableInput matInput disabled="false" name="type" value="baz" />
        </mat-form-field>
      </div>
    </div>
  </fieldset>
</mat-card>

第二步：在组件TS文件里写自适应逻辑 #

通过ViewChild获取输入框元素，然后计算文本宽度并设置：

import { Component, ViewChild, ElementRef, AfterViewInit } from '@angular/core';

@Component({
  selector: 'app-your-component', // 换成你自己的组件选择器
  templateUrl: './your-component.component.html',
  styleUrls: ['./your-component.component.css']
})
export class YourComponent implements AfterViewInit {
  // 获取模板里的输入框元素
  @ViewChild('staticInput') staticInput!: ElementRef<HTMLInputElement>;
  @ViewChild('editableInput') editableInput!: ElementRef<HTMLInputElement>;

  ngAfterViewInit(): void {
    // 初始化时设置静态输入框的宽度
    this.adjustInputWidth(this.staticInput);
    // 初始化设置可编辑输入框的宽度，并监听输入事件实时更新
    this.adjustInputWidth(this.editableInput);
    this.editableInput.nativeElement.addEventListener('input', () => {
      this.adjustInputWidth(this.editableInput);
    });
  }

  // 计算并设置输入框宽度的工具方法
  private adjustInputWidth(inputRef: ElementRef<HTMLInputElement>): void {
    const input = inputRef.nativeElement;
    // 创建一个隐藏的span，用来模拟输入框的文本样式，计算真实宽度
    const tempSpan = document.createElement('span');
    tempSpan.style.visibility = 'hidden';
    tempSpan.style.whiteSpace = 'nowrap';
    // 复制输入框的字体、内边距等样式，确保计算准确
    tempSpan.style.fontFamily = getComputedStyle(input).fontFamily;
    tempSpan.style.fontSize = getComputedStyle(input).fontSize;
    tempSpan.style.padding = getComputedStyle(input).padding;
    tempSpan.textContent = input.value;
    
    document.body.appendChild(tempSpan);
    // 设置输入框宽度，额外加10px避免文字溢出
    input.style.width = `${tempSpan.offsetWidth + 10}px`;
    document.body.removeChild(tempSpan);
  }
}

注意事项 #

• 要在ngAfterViewInit钩子里面执行初始化逻辑，这时候DOM已经渲染完成，能正确获取到输入框元素
• 可编辑输入框需要监听input事件，每次内容变化都重新计算宽度
• 临时span的样式要和输入框保持一致，不然计算出来的宽度会有偏差

内容的提问来源于stack exchange，提问作者Kamil