【问题标题】:How to update Mat-Input Place Holder on Focus如何在焦点上更新 Mat-Input 占位符
【发布时间】:2019-05-11 13:46:54
【问题描述】:

我有这个材料输入字段,当用户关注输入时,我希望有一个不同的占位符。

当没有重点和价值时

当用户关注它时

当用户有一些价值并关注它时

Material 中是否有事件或解决方法可以实现相同的目的。

<mat-form-field class="example-full-width">
    <input matInput #message maxlength="256" placeholder="Your Message Goes Here">
  </mat-form-field>

【问题讨论】:

    标签: angular-material materialize mat-input


    【解决方案1】:

    您可以通过属性绑定将类变量传递给您的placeholder 属性来完成此操作。

    在您的组件中创建具有默认值的属性变量

    myPlaceholder = 'Your Message Goes Here'
    

    将变量分配给属性[placeholder] 并在点击mat-form-field 时更改为Message

    <mat-form-field class="example-full-width" (click)="myPlaceholder = 'Message'">
        <input matInput [placeholder]="myPlaceholder">
      </mat-form-field>
    

    堆栈闪电战

    https://stackblitz.com/edit/angular-fsbbzr?embed=1&file=app/input-overview-example.ts

    【讨论】:

    • 谢谢这解决了我的问题。添加另一个模糊事件以替换占位符,以防用户没有输入任何内容
    猜你喜欢
    • 2018-10-01
    • 2019-02-27
    • 2018-11-13
    • 2012-09-14
    • 2012-10-22
    • 2020-01-10
    • 1970-01-01
    • 2015-08-15
    • 2023-03-10
    相关资源
    最近更新 更多