Question

需要在primeNg文本框中放置一个清晰的图标。然后单击它应该清除该字段。

Answer 1

这个问题与CSS更相关。无论如何，我希望您正在寻找这样的东西。

以下代码将在Primeng文本框中的右侧显示图标：

<input type="text" pInputText placeholder="Username">  
        <span style="margin-left:-20px;">
            <button (click)="userclick()" style="border:none; outline: none; position: relative; width:0;background-color: #fff;">
                <i class="pi pi-times"></i>
            </button>
        </span>

如果要在文本框内看到左侧的图标，请执行以下操作： 然后在输入类型之前使用跨度并调整边距。

我使用内联CSS只是为了达到您的目的。但我强烈建议上课并在那里使用这些属性。

Answer 2

您可以执行以下操作->

$id =  null->id;

Answer 3

对于Primefaces

<div class="ui-inputgroup">

   <span class="ui-inputgroup-addon">
      <i class="fa fa-fw fa-search"></i>
   </span>

  <input type="text" [value]="search_text" placeholder="Search" #texttosearch (keyup)="onKey(texttosearch.value)" pInputText>

   <span class="ui-inputgroup-addon">
      <i class="fa fa-fw fa-times" (click)="texttosearch.value = ''"></i>
   </span>

</div>

Answer 4

对于 PrimeNG 版本 11

很简单，只需稍微修改文档中提供的示例代码即可添加（点击）。

component.html

<span class="p-input-icon-right">
    <i class="pi pi-times-circle" (click)="clearfilter()" ></i>
    <input type="text" pInputText [(ngModel)]="value2" >        
</span>

component.ts

clearFilter() {
this.value2 = '';
}

component.css

.pi.pi-times-circle {
  z-index: 1;
}

如何在primeNg输入中显示清晰的图标？

4 个答案: