ASP.NET Boilerplate中CSS异常：文本框点击蓝色下划线返回后消失

看起来你遇到的问题是Angular路由切换后，自定义页面的输入框失去了默认CreateUser页面的聚焦下划线效果。我对比了你的两段代码，发现问题大概率出在DOM结构的差异上，另外路由切换后的样式初始化也可能是诱因。

问题分析 #

先看默认create-user.component里的输入框结构：

<div class="form-group form-float">
  <div class="form-line">
    <input id="username" type="text" name="UserName" [(ngModel)]="user.userName" required maxlength="32" minlength="2" class="validate form-control">
    <label for="username" class="form-label">{{l("UserName")}}</label>
  </div>
</div>

再看你的mypage.html结构：

<div class="form-group form-float">
  <label for="myName" class="form-label">{{l("myName")}}</label>
  <div class="form-line">
    <input id="myName" type="text" name="myName" [(ngModel)]="name.myName" placeholder="{{l('EnterNAME')}}" required maxlength="32" class="validate form-control">
  </div>
</div>

核心差异是：默认页面的<label>是包裹在<div class="form-line">内部的，而你的自定义页面把label放在了form-line外面。这类浮动标签表单的样式逻辑（包括聚焦时的蓝色下划线）高度依赖DOM层级结构，位置错了就会导致样式失效。

另外，路由切换后组件重新渲染时，可能表单的初始化脚本没有再次执行——很多UI组件库会在页面加载时初始化表单元素，路由切换后的动态DOM可能没被重新初始化。

修复步骤 #

1. 调整DOM结构，对齐默认页面 #

把label移到form-line内部，和CreateUser页面保持一致：

<div class="form-group form-float">
  <div class="form-line">
    <input id="myName" type="text" name="myName" [(ngModel)]="name.myName" placeholder="{{l('EnterNAME')}}" required maxlength="32" class="validate form-control">
    <label for="myName" class="form-label">{{l("myName")}}</label>
  </div>
</div>

注意：浮动标签通常需要和input相邻，且在input之后，这样才能正确触发浮动和聚焦样式。

2. 路由激活时重新初始化表单样式（可选，如果调整结构后仍有问题） #

如果调整结构后，切换页面回来还是失效，那可能是组件库的初始化逻辑没在路由激活时运行。你可以在组件的ngAfterViewInit或者路由动画完成回调中，调用组件库的表单初始化方法：

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

@Component({
  selector: 'app-mypage',
  templateUrl: './mypage.html'
})
export class MyPageComponent implements AfterViewInit {
  constructor(private el: ElementRef) {}

  ngAfterViewInit() {
    // 重新初始化form-line相关样式逻辑
    const formLines = this.el.nativeElement.querySelectorAll('.form-line');
    formLines.forEach((line: HTMLElement) => {
      // 如果项目用了jQuery类的组件库，可触发初始化事件
      // 示例：$(line).trigger('refresh');
    });
  }

  // 绑定路由动画完成事件，确保切换后重新初始化
  onRouterTransitionDone() {
    this.ngAfterViewInit();
  }
}

然后在模板里绑定路由动画的回调：

<div class="row clearfix" [@routerTransition]="{value: '', callback: onRouterTransitionDone}">
  <!-- 页面内容 -->
</div>

3. 检查CSS类是否完整 #

确保你的input标签上的类和默认页面完全一致，默认页面的input有validate form-control，你也需要保留这些类，避免样式规则不匹配。

验证 #

调整后，先刷新页面测试初次加载的效果，然后切换到其他页面再返回，点击输入框应该就能正常显示蓝色下划线了。

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