Angular中文本颜色属性绑定为何未按输入值正确响应？

问题代码 #

TypeScript 文件

import { Component } from '@angular/core';

@Component({
  selector: 'app-event-binding',
  templateUrl: './event-binding.component.html',
  styleUrls: ['./event-binding.component.css']
})
export class EventBindingComponent {

  textColor = '';
  onInput = (ev: any) => {
    this.textColor = ev.target.value;
  }
}

HTML 模板

<div>
    <h3 [style.color]="textColor">EVENT BINDING</h3>
    <input type="text" (input)="onInput($event)">
</div>

问题场景 #

输入完整的"blue"时，h3文本会变成蓝色；但按下退格键把内容改成"blu"时，文本依然保持蓝色，只有清空输入框时才会变回黑色。疑惑这是不是HTML的颜色历史保留机制？

原因解析 #

根本不是什么颜色历史保留机制，核心是浏览器处理无效CSS颜色值的逻辑：

• 当输入"blue"，这是标准的CSS颜色关键字，浏览器能识别，所以h3会应用蓝色样式。
• 当输入变成"blu"，这不是任何合法的CSS颜色格式（既不是标准关键字，也不是十六进制、RGB/RGBA等有效格式），此时浏览器不会修改当前已经生效的颜色样式，而是保留上一次有效的值。
• 只有当输入框清空，textColor变为空字符串，Angular会移除color这个内联样式，h3就会恢复到默认的黑色（继承自父元素或浏览器默认样式）。

解决思路 #

如果想要输入无效颜色值时立刻恢复默认黑色，可以在组件里增加颜色合法性校验，当输入值无效时把textColor设为空：

修改后的TypeScript代码：

import { Component } from '@angular/core';

@Component({
  selector: 'app-event-binding',
  templateUrl: './event-binding.component.html',
  styleUrls: ['./event-binding.component.css']
})
export class EventBindingComponent {

  textColor = '';
  
  onInput = (ev: any) => {
    const inputVal = ev.target.value;
    this.textColor = this.isValidColor(inputVal) ? inputVal : '';
  }

  // 校验颜色是否合法
  private isValidColor(color: string): boolean {
    if (!color) return false;
    const testEl = document.createElement('div');
    testEl.style.color = color;
    return testEl.style.color !== '';
  }
}

这个校验逻辑很简单：创建一个临时DOM元素，把测试颜色赋值给它的color样式，如果浏览器能识别这个颜色，元素的style.color会返回有效颜色值；如果无效，就会返回空字符串，以此判断输入的颜色是否合法。

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