IE 11 中的问题与占位符 Angular 5答案

【问题标题】：Issue in ie 11 with placeholder Angular 5IE 11 中的问题与占位符 Angular 5
【发布时间】：2019-02-22 22:28:17
【问题描述】：

我们的项目有以下情况

 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 中，输入消失焦点时文本会发生变化。有什么想法吗？

【问题讨论】：

试试[占位符]
一切正常

标签： angular internet-explorer-11

【解决方案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>

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 link

【讨论】：