如何将输入区域与角度中的文本相匹配？

Question

我希望有一个输入区域来适应其中的文字。

我的代码：

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

上述代码的结果是：

我尝试将输入宽度设置为auto或100%或fit-content，但这并没有改变。

Answer 1

尝试https://material.angular.io/components/input/api

中提到的指令matTextareaAutosize

那应该是你正在寻找的东西。

单独使用CSS无法完成，因为CSS不知道用户输入。它必须通过Javascript完成。

如果您只对纯CSS的“增加宽度”输入字段感兴趣，那么您可以这样做：

• 使输入字段非常宽
• 设置CSS样式以在键入的文本下划线（请参阅https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration）
• 应该对“自动展开”产生类似的效果，但它可能与材质设计不一致