angular - 如何确保 angularjs 文本框适合文本中输入的内容？

Question

我有 3 个 HTML 文本框，每个文本框的初始宽度均为 30px。我想做到这一点，如果有人在其中一个文本框内键入超出文本框宽度的文本，则所有三个文本框的宽度都会扩展以匹配最大文本框的大小。执行此操作的最佳方法是什么？

Answer 1

@Component({
  selector: 'my-app',
  styles: [`#size
{
    position: absolute;
    visibility: hidden;
    height: auto;
    width: auto;
    white-space: nowrap; /* Thanks to Herb Caudill comment */
}`]
  template: `
  <div id="size" #size>{{text}}</div>
  <input #inp [(ngModel)]="text" 
              (ngModelChange)="width=size.clientWidth" 
              [style.width.px]="width > 50 ? width +10 : 60">
  `,
})

Plunker link

它使用隐藏的 <div>需要与输​​入元素相同的字体样式，每次更改时，输入都会更新以匹配隐藏的大小 <div>包含相同的文本。

另见 Calculate text width with JavaScript