如何使输入区域适合角度文本？

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）
• 这应该会产生与“自动扩展”类似的效果，但可能与材料设计不一致

Answer 2

我们所做的是创建一个具有相同值的隐藏 div。

然后，我们创建了一个名为

dynamicWidth

的指令，它获取任何元素的宽度并添加下面的

[(fluidWidth)]

的宽度。

<input dynamicWidth [style.minWidth.px]="inputRef + 25" [style.width.px]="inputRef + 25"  />

value

这里是任何文字或参考。确保这是隐藏的。

<div dynamicWidth aria-hidden="true" 
[valueText]="value"
[innerHTML]="value" 
[(fluidWidth)]="inputRef"> </div>