Angular2应用IE11下输入框聚焦时placeholder不显示问题求助

嘿，这个问题我在维护Angular项目的时候跟IE11死磕过好几次！它的原生placeholder逻辑就是这么奇葩——输入框一聚焦就把placeholder藏起来，和Chrome、Firefox的行为完全不一致。给你几个实测有效的解决方案，你可以根据项目情况选：

方案一：自定义指令模拟Persistent Placeholder（最可靠） #

既然IE11不支持原生聚焦显示placeholder，我们就自己实现一个。通过Angular指令创建一个模拟的placeholder元素，完全控制它的显示逻辑，不受浏览器限制。

步骤1：创建自定义指令 #

import { Directive, ElementRef, Renderer2, OnInit, OnDestroy } from '@angular/core';

@Directive({
  selector: '[appPersistentPlaceholder]'
})
export class PersistentPlaceholderDirective implements OnInit, OnDestroy {
  private placeholderSpan: HTMLElement;
  private inputEl: HTMLInputElement;
  private cleanupFns: (() => void)[] = [];

  constructor(private elRef: ElementRef, private renderer: Renderer2) {
    this.inputEl = this.elRef.nativeElement as HTMLInputElement;
  }

  ngOnInit(): void {
    // 创建模拟placeholder的span元素
    this.placeholderSpan = this.renderer.createElement('span');
    this.renderer.setProperty(this.placeholderSpan, 'textContent', this.inputEl.placeholder);
    
    // 配置样式，对齐原生placeholder（根据你的项目样式调整）
    this.renderer.setStyle(this.placeholderSpan, 'position', 'absolute');
    this.renderer.setStyle(this.placeholderSpan, 'pointer-events', 'none');
    this.renderer.setStyle(this.placeholderSpan, 'color', '#999');
    this.renderer.setStyle(this.placeholderSpan, 'padding', '0 12px');
    this.renderer.setStyle(this.placeholderSpan, 'font-size', '1rem');
    this.renderer.setStyle(this.placeholderSpan, 'line-height', '2.5rem'); // 和输入框高度匹配

    // 插入到输入框的父容器中（注意父容器要设置position: relative）
    this.renderer.insertBefore(this.inputEl.parentElement, this.placeholderSpan, this.inputEl);

    // 监听输入、聚焦、失焦事件，控制模拟placeholder的显示
    const inputListener = this.renderer.listen(this.inputEl, 'input', () => this.togglePlaceholder());
    const focusListener = this.renderer.listen(this.inputEl, 'focus', () => this.togglePlaceholder());
    const blurListener = this.renderer.listen(this.inputEl, 'blur', () => this.togglePlaceholder());

    this.cleanupFns.push(inputListener, focusListener, blurListener);

    // 初始化显示状态
    this.togglePlaceholder();
  }

  private togglePlaceholder(): void {
    // 只要输入框无内容，就显示模拟placeholder，不管是否聚焦
    const displayStyle = this.inputEl.value.length === 0 ? 'block' : 'none';
    this.renderer.setStyle(this.placeholderSpan, 'display', displayStyle);
  }

  ngOnDestroy(): void {
    // 清理事件监听和DOM元素
    this.cleanupFns.forEach(fn => fn());
    this.renderer.removeChild(this.inputEl.parentElement, this.placeholderSpan);
  }
}

步骤2：使用指令 #

在你的输入框上添加指令，并确保父容器设置position: relative：

<div style="position: relative;">
  <input 
    type="text" 
    placeholder="请输入用户名" 
    appPersistentPlaceholder
    #usernameInput
  >
</div>

步骤3：实现默认聚焦 #

在组件的ngAfterViewInit中手动聚焦（避免原生autofocus的时序问题）：

import { Component, ViewChild, ElementRef, AfterViewInit } from '@angular/core';

@Component({
  // 组件模板
})
export class YourComponent implements AfterViewInit {
  @ViewChild('usernameInput') usernameInput: ElementRef<HTMLInputElement>;

  ngAfterViewInit(): void {
    this.usernameInput.nativeElement.focus();
  }
}

这个方案的好处是完全脱离浏览器原生行为，不管IE11怎么折腾，模拟的placeholder都会按照我们的逻辑显示。

方案二：IE11专属CSS Hack（简单但不稳定） #

尝试用CSS强制IE11在聚焦时显示placeholder，不过这个方法在某些场景下可能失效，因为IE11的内部样式优先级很高：

/* 仅针对IE11生效 */
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
  input:focus::-ms-input-placeholder {
    color: #999 !important;
    opacity: 1 !important;
  }
}

如果你的项目样式不复杂，可以先试试这个方法，不行再换方案一。

方案三：延迟聚焦（快速临时方案） #

IE11有时候会因为渲染时序问题，在输入框刚初始化就聚焦时跳过placeholder显示。我们可以延迟一点时间再聚焦，给浏览器足够的渲染时间：

import { Component, ViewChild, ElementRef, AfterViewInit } from '@angular/core';

@Component({
  template: '<input type="text" placeholder="请输入内容" #delayedFocusInput>'
})
export class YourComponent implements AfterViewInit {
  @ViewChild('delayedFocusInput') delayedFocusInput: ElementRef<HTMLInputElement>;

  ngAfterViewInit(): void {
    // 延迟100ms再聚焦，让IE11先渲染placeholder
    setTimeout(() => {
      this.delayedFocusInput.nativeElement.focus();
    }, 100);
  }
}

这个方法简单，但稳定性不如方案一，有时候延迟时间需要根据项目调整。

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