Angular实现输入框聚焦浮动标签仅首项生效的TS代码问题如何修复？

• 原代码中使用document.querySelector只能匹配到页面中第一个符合选择器规则的输入框，导致其余输入框没有绑定对应的聚焦/失焦逻辑
• 原逻辑在每次输入框触发focus事件时都会重复注册监听事件，会造成冗余执行的性能问题

1. 修改forms.component.html #

将所有输入框的事件绑定修改为直接传递当前触发事件的DOM元素，同时新增失焦事件绑定：

<div class="forms-field-box">
    <div class="forms-field-inp-box">
        <input id="forms_field_inp_fn" class="forms-field-inp" type="text" (focus)="inpAnim($event.target)" (blur)="inpBlur($event.target)">
        <label for="forms_field_inp_fn" class="forms-field-inp-lbl">
            FirstName
        </label>
    </div>
</div>
<div class="forms-field-box">
    <div class="forms-field-inp-box">
        <input id="forms_field_inp_ln" class="forms-field-inp" type="text" (focus)="inpAnim($event.target)" (blur)="inpBlur($event.target)">
        <label for="forms_field_inp_ln" class="forms-field-inp-lbl">
            LastName
        </label>
    </div>
</div>
 <div class="forms-field-box">
    <div class="forms-field-inp-box">
        <input id="forms_field_inp_p" class="forms-field-inp" type="text" (focus)="inpAnim($event.target)" (blur)="inpBlur($event.target)">
        <label for="forms_field_inp_p" class="forms-field-inp-lbl">
            Password
        </label>
    </div>
</div>


<div class="forms-login-btn">
    Login
</div>

注：同时移除了重复的id="forms_input"，避免id重复冲突

2. 修改forms.component.ts #

删除原有的手动绑定监听逻辑，直接通过传入的元素操作类名：

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

@Component({
  selector: 'app-forms',
  templateUrl: './forms.component.html',
  styleUrls: ['./forms.component.scss']
})
export class FormsComponent implements OnInit {

  constructor() { }

  ngOnInit(): void {
  }
      
  inpAnim(inputEle: HTMLInputElement){
    inputEle.classList.add("forms-field-inp-lbl-anim");
  }

  inpBlur(inputEle: HTMLInputElement){
    if(inputEle.value.trim() === ""){
      inputEle.classList.remove("forms-field-inp-lbl-anim");
    }
  }
}

3. SCSS无需修改 #

原SCSS中的类选择器规则可以正常匹配效果。

• 所有输入框聚焦时，对应标签自动上浮
• 输入框失焦时如果内容为空，标签回落；如果有输入内容，标签保持上浮状态

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