Angular Material：突出显示文本框中的单词答案

【问题标题】：Angular Material: Highlight Words in a TextboxAngular Material：突出显示文本框中的单词
【发布时间】：2020-04-06 10:34:46
【问题描述】：

如何仅突出显示 Angular Material 文本框中的文本，而不是整个内框？我只想突出显示 (Sushi) 中从 '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>

【问题讨论】：

在每个输入中只突出显示一个字符是什么意思？
我没这么说，请看上面的问题
无法在输入框中执行此操作...这是一个很好的解决方法：stackoverflow.com/a/43296121/8757883

标签： angular typescript angular-material angular8

【解决方案1】：

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

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

CSS：

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

这是一个simple example，展示了它的工作原理。

希望能解决您的问题:)

【讨论】：