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>的大小。< / p>

另见Calculate text width with JavaScript

如何确保angularjs2文本框符合文本中输入的内容？

1 个答案: