Angular指令中获取input placeholder样式失败，寻求替代方案

你当前代码无法获取placeholder样式的核心问题在于浏览器对placeholder伪元素的兼容性处理，以及未完整覆盖不同内核的伪元素选择器。以下是可行的替代方案：

解决方法 #

通过遍历不同浏览器兼容的placeholder伪元素选择器，确保能正确获取到对应的计算样式，再提取所需的字体属性：

// 定义各浏览器兼容的placeholder伪元素选择器
const placeholderPseudoSelectors = [
  '::placeholder',
  '::-webkit-input-placeholder',
  '::-moz-placeholder',
  ':-ms-input-placeholder'
];

let placeholderStyle: CSSStyleDeclaration | null = null;

// 遍历选择器，直到获取有效样式
for (const selector of placeholderPseudoSelectors) {
  placeholderStyle = getComputedStyle(this.elm.nativeElement, selector);
  // 通过检查关键属性判断是否获取到有效样式
  if (placeholderStyle?.fontFamily) {
    break;
  }
}

// 成功获取后组装字体样式
if (placeholderStyle) {
  const { fontStyle, fontWeight, fontSize, fontFamily } = placeholderStyle;
  text.font = `${fontStyle} ${fontWeight} ${fontSize} ${fontFamily}`;
}

关键说明 #

• 不同浏览器内核对placeholder伪元素的实现有不同前缀：WebKit内核（Chrome、Safari）使用::-webkit-input-placeholder，旧版Firefox用::-moz-placeholder，IE用:-ms-input-placeholder，现代浏览器支持标准的::placeholder
• 遍历选择器可以覆盖更多浏览器场景，避免因单一选择器不匹配导致获取失败
• 必须从获取到的placeholderStyle中提取属性，而非直接使用input元素本身的样式

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