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

问题描述

如何仅突出显示角度材料"文本框中的文本，而不突出显示整个内部框?我只想在(Sushi)中突出显示从"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 :)

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