Angular 5 在 IE 11 中 placeholder 功能异常问题

Let’s work through this IE11 compatibility problem together. The core issue here is that IE11 doesn’t handle Angular’s interpolation binding ({{ }}) for the placeholder property as reliably as modern browsers—especially when conditional expressions are involved. Here’s how to resolve it:

1. Swap Interpolation for Property Binding #

Instead of using interpolation to set the placeholder, switch to Angular’s property binding syntax ([placeholder]). This is Angular’s recommended approach for binding values to element properties and has far better cross-browser support, including IE11:

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

This syntax tells Angular to directly bind the expression result to the input’s placeholder property, which IE11 processes consistently.

2. Adjust Focus Timing for IE11 #

IE11 sometimes has timing quirks with DOM focus operations immediately after property updates. To make sure the placeholder updates before the input gains focus, wrap the focus() call in a setTimeout with a 0ms delay (this pushes the focus action to the end of the event loop):

handleSearchClick() {
  this.isSearchFocused = true;
  // Delay focus to ensure placeholder updates properly in IE11
  setTimeout(() => {
    this.marketSearchInput.nativeElement.focus();
  }, 0);
  if (!this.active) {
    this.openModal(...); // Keep your existing modal logic here
  }
}

3. Double-Check Required Polyfills #

Angular 5 relies on polyfills to support ES6 features in IE11. Make sure your polyfills.ts file includes these critical polyfills (uncomment or add them if missing):

import 'core-js/es6/symbol';
import 'core-js/es6/object';
import 'core-js/es6/function';
import 'core-js/es6/number';
import 'core-js/es6/string';
import 'core-js/es6/array';

These polyfills ensure the ternary operator and other ES6 features work as expected in IE11.

内容的提问来源于stack exchange，提问作者Denis