动态更改占位符文本

Posted

技术标签:

【中文标题】动态更改占位符文本【英文标题】:Changing the placeholder text dynamically 【发布时间】:2020-11-28 12:29:38 【问题描述】:

我对 ion-input 的占位符有疑问。当没有选中任何内容以再次显示它时,我想在选中复选框时更改占位符。我的一些代码:

placeholderText = "Write something";
 <ion-input
          name="search"
          type="search"
          ngModel
          [placeholder]="placeholderText"
          #searchCtrl="ngModel"
       ></ion-input>

 dummyArray:  name: string; x: string; checked: boolean [] = [
    
      name: "a",
      x: "grg",
      checked: false,
    ,
    
      name: "b",
      phone: "ggg",
      checked: false,
    ,
].  This is a dummy date array of objects.
    <ion-list *ngFor="let dummy of dummyArray">
      <ion-label> dummy.name</ion-label>
      <ion-checkbox></ion-checkbox>
    </ion-list>

如果有人从复选框中选中以拥有一个空字符串占位符,并且如果没有人被选中以显示文本,我需要更改 placeholderText。

我怎样才能做到这一点,请帮助

谢谢

【问题讨论】:

我对 ion-inpt 不熟悉,但是如果你想在 js/html 中做这件事,这个小提琴可以帮助你:jsfiddle.net/asutosh/5wb9zgsj/7 【参考方案1】:

离子复选框有一个事件ionChange - 当被检查的财产发生变化时发出。每当复选框更改时,我们需要检查并更新占位符值。

将 placeHolder 创建为变量并在复选框更改时更新它

# Component HTML File
<ion-checkbox slot="end" [(ngModel)]="checkBoxValue" 
 (ionChange)="checkBoxChangeHandle($event)"></ion-checkbox>
<ion-input [placeholder]="dynamicPlaceholder"></ion-input>

# Component.ts
export class AppComponent implements OnInit 

  dynamicPlaceholder: string = "write Something"
  checkBoxValue:boolean = false
  constructor()
  ngOnInit()

  checkBoxChangeHandle(checkValue) 
     this.dynamicPlaceholder = checkValue ? "": "Write Something";
  

 

希望这有效..

【讨论】:

您好,感谢您在这里的回复。我尝试了代码,但它不起作用。我不知道为什么,但我认为事件功能并不完全好。它没有正确更改占位符.. 只需检查发出的事件的值。控制台日志(检查值)。如果它返回你所做的。那么这是唯一的方法。 ty @Mohammed Ismail 快乐编码 ;)

以上是关于动态更改占位符文本的主要内容,如果未能解决你的问题,请参考以下文章

使用 Javascript 动态更改 HTML5 输入元素的“占位符”属性

使用 jQuery 更改占位符文本

使用 Swift 更改占位符文本颜色

在焦点上更改占位符文本

text 使用此输入占位符SCSS Mixin更改占位符属性的颜色。添加背景颜色或只更改文本颜色

Tailwind CSS 更改占位符选项的文本颜色