Question

我想设置一个占位符，在用户输入时消失，输入标签总是浮动在输入上方，就像在此codepen中一样： https://codepen.io/anon/pen/QjypdO

但我不知道如何使用最新的角形材料来实现它。

更新

由于Angular Material尚不支持，因此我实施了一个模拟所需行为的变通方法：

HTML

<md-input-container [ngClass]="{ 'zip': zipPlaceholderActive }">
    <input mdInput [placeholder]="Zip" [ngModel]="zipValue" (focus)="removeDefaultValue()">
</md-input-container>

打字稿：

removeDefaultValue() {
    if (this.zipPlaceholderActive) {
        this.zipValue = '';
    }
    this.zipPlaceholderActive = false;
}

CSS：

.zip .mat-input-element {
    color: #999;
}

Answer 1

这是我最接近占位符的Codepen示例。此示例也处理键盘事件，因此如果用户删除所有字符，则占位符将返回，如果用户再次开始键入，则占位符将消失。

ts:

  food: string = "Enter a food name";
  showPlaceholder: boolean = true;

  removePlaceholder(){
    if(this.food == "Enter a food name"){
      this.food = "";
      this.showPlaceholder = false;
    }
  }

  viewPlaceholder(){
    if(this.food == ""){
      this.food = "Enter a food name";
      this.showPlaceholder = true;  
    }

  }

html:

<md-input-container>
  <input mdInput placeholder="Favorite food" 
         [(ngModel)]="food"
         [ngClass]="{'gray-text': showPlaceholder}"
         (focus)="removePlaceholder()"
         (keydown)="removePlaceholder()"
         (blur)="viewPlaceholder()"
         (keyup)="viewPlaceholder()">
</md-input-container>

css:

.gray-text{
  color: #999999;
}

Plunker demo

Answer 2

如果你只是想在字段为空而没有聚焦时替换占位符（所以当它实际上位于占位符所在的位置时），可以用CSS实现：

<mat-input-container custom-placeholder="true" style="--custom-placeholder-text: 'Type terms…';">
    <input type="text" matInput name="searchText" placeholder="Query">
</mat-input-container>

如果你可以使用CSS变量，你可以从标记中传递占位符值：

HTML：

:host /deep/ :not(.mat-focused)[custom-placeholder] {
    .mat-input-placeholder.mat-empty {
        color: transparent;
        &::before {
            content: var(--custom-placeholder-text);
            color: black;
        }
    }
}

SCSS：

{{1}}

Angular 2材质中的占位符和标签

2 个答案: