如何确保angularjs2文本框适合文本输入？

发布时间：2020-12-17 17:35:50 所属栏目：安全来源：网络整理

导读：我有3个 HTML文本框,每个文本框的初始宽度为30px.我想这样做,如果有人在其中一个文本框中输入文本以使其超出框的宽度,则所有三个文本框的宽度将扩展以匹配最大文本框的大小.做这个的最好方式是什么？解决方法 @Component({ selector: 'my-app',styles: [`#s

我有3个 HTML文本框,每个文本框的初始宽度为30px.我想这样做,如果有人在其中一个文本框中输入文本以使其超出框的宽度,则所有三个文本框的宽度将扩展以匹配最大文本框的大小.做这个的最好方式是什么？

解决方法

@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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!