angular - Angular Material：突出显示文本框中的单词

Question

如何仅突出显示 Angular Material 文本框中的文本，而不是整个内框？我只想突出显示（寿司）中从 's' 到 'i' 的结尾，而不是整个盒子。

我们将其应用于只读文本框。此外，使用 Angular 阅读 Javascript 操作并不理想，因此需要寻找合适的方法。

https://material.angular.io/components/input/overview

<form class="example-form">
  <mat-form-field class="example-full-width">
    <input matInput placeholder="Favorite food" value="Sushi">
  </mat-form-field>

  <mat-form-field class="example-full-width">
    <textarea matInput placeholder="Leave a comment"></textarea>
  </mat-form-field>
</form>

标签： angulartypescriptangular-materialangular8

Answer 1

一个快速的解决方案是突出显示特定类的 CSS 中的文本。然后可以为您的只读输入分配此类。此解决方案并不完美，但可能适合您的需求

这篇SO 帖子展示了如何仅突出显示的文本input，我建议您阅读它以了解此解决方案的局限性。

CSS：

.yourInputElement::first-line{
  background-color: gold; 
}

这是一个简单的例子，展示了它是如何工作的。

希望能解决你的问题:)