Angular Material:突出显示文本框中的单词 [英] Angular Material: Highlight Words in a Textbox

问题描述

如何仅突出显示 Angular Material 文本框中的文本，而不突出显示整个内框?我只想突出显示(寿司)中从 's' 到 'i' 的结尾，而不是整个框.

我们将把它应用到只读文本框.另外，使用 Angular 读取 Javascript 操作并不理想，因此寻找合适的方法.

解决方案

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

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

CSS:

.yourInputElement::first-line{背景颜色:金色；}

这是一个简单示例，展示了它的工作原理.

希望能解决您的问题:)

How do I Highlight Only the Text in Angular Material textbox, and Not the whole inner box? I only want to highlight up from 's' to the end of 'i' in (Sushi), not the whole box.

We will apply this to a read only textbox . Also, reading Javascript manipulations are not ideal with Angular, so looking for appropriate way.

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>

解决方案

A quick solution is to highlight the text in the CSS for a certain class. This class can then be assigned for your readonly inputs. This solution isn't perfect but it might fit your needs

This SO post shows how to highlight only the text of an input, I suggest you read it to also see the limitations of this solution.

CSS:

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

Here's a simple example showing how it would work.

Hope that solves your issue :)

这篇关于Angular Material:突出显示文本框中的单词的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！