在IE 11中使用占位符Angular 5发行

Question

我们的项目有以下情况

 isSearchFocused ? 'Type two or more characters' : 'Search markets'

在HTML

  <input class="market-search__search-input"
  type="text"
  #marketSearchInput
  (click)="handleSearchClick()"
   placeholder="{{ isSearchFocused ? 'Type two or more characters' : 'Search markets' }}"
  formControlName="query">

方法“ handleSearchClick”

handleSearchClick() {
this.isSearchFocused = true;
this.marketSearchInput.nativeElement.focus();

if (!this.active) {
  this.openModal();
}

}

当值“ isSearchFocused”因事件而变化时，将其从“ false”更改为“ true”-在除IE 11之外的所有浏览器中都可以正常工作。在IE 11中，当输入消失时，文本会更改。 有任何想法吗？

Answer 1

您可以使用具有某些CSS样式的表单组和自定义标签来克服此问题。

HTML

<form [formGroup]="myFormGroup">
  <mat-form-field>
    <input matInput type="text"
      #marketSearchInput formControlName="market"
      (focus)="handleSearchClick()" (blur)="handleSearchBlur()">
    <span class="mask-placeholder" 
    *ngIf="this.myFormGroup.value['market'].length === 0">
    {{ isSearchFocused ? 'Type two or more characters' : 'Search markets' }}</span>
  </mat-form-field>
</form>

s

import {Component} from '@angular/core';
import { FormControl, FormGroup } from '@angular/forms';

/** @title Simple form field */
@Component({
  selector: 'form-field-overview-example',
  templateUrl: 'form-field-overview-example.html',
  styleUrls: ['form-field-overview-example.css']
})
export class FormFieldOverviewExample {
  isSearchFocused: Boolean = false;
  myFormGroup: FormGroup;

  ngOnInit(){
    this.myFormGroup = new FormGroup({
      market: new FormControl('')});
  }
  handleSearchClick(){
    this.isSearchFocused = true;
  }

  handleSearchBlur(){
    this.isSearchFocused = false;
  }
}

CSS / SCSS

.mask-placeholder {
      display: inline-block;
      position: absolute;
      left: 0;
      color: #a9a9a9;
      font-weight: 100;
      top: 6px;
      text-overflow: ellipsis;
      overflow: hidden;
      width: 100%;
      white-space: nowrap;
    }

工作stackblitz链接