Firefox中float-label功能失效，Chrome正常，求技术解决方案

嘿，我之前碰到过不少Firefox和Chrome之间表单组件的兼容坑，你的这个浮动标签问题大概率是浏览器对表单元素状态的解析差异导致的，咱们一步步来搞定它～

先排查最常见的原因：缺少Placeholder属性 #

很多浮动标签（包括PrimeNG的ui-float-label）的逻辑依赖:placeholder-shown伪类来判断是否触发标签浮动，但Firefox对这个伪类的检测要求更严格——如果textarea没有设置placeholder属性，Firefox可能无法正确识别元素的空状态。

你可以先给textarea加个空的placeholder试试：

<div class="col-md-6 col-sm-6 form-group">
  <span class="ui-float-label">
    <textarea 
      pInputTextarea 
      [(ngModel)]="consulta.dsDiagnostico1" 
      name="dsDiagnostico1" 
      id="diagnostico1" 
      style="resize:none" 
      rows="4" 
      cols="100" 
      class="form-control" 
      maxLength="4000"
      placeholder=""
    ></textarea>
    <label for="diagnostico1">Diagnóstico 1</label>
  </span>
</div>

针对性调整Firefox的CSS样式 #

如果加了placeholder还是不行，那可能是Firefox对textarea的:focus状态或标签定位的计算和Chrome不一致。你可以用Firefox专属的CSS规则来修正：

/* 只针对Firefox生效的样式 */
@-moz-document url-prefix() {
  /* 当textarea获得焦点或有内容时，让标签浮动 */
  .ui-float-label textarea:focus + label,
  .ui-float-label textarea:not(:placeholder-shown) + label {
    top: -12px; /* 根据你的设计调整这个数值，确保标签不重叠输入框 */
    font-size: 0.85rem;
    color: #007ad9; /* 可选：设置浮动后的标签颜色 */
    background-color: #fff; /* 可选：给标签加背景，覆盖输入框边框 */
    padding: 0 4px;
  }

  /* 给textarea顶部加足够内边距，避免标签和输入内容重叠 */
  .ui-float-label textarea.form-control {
    padding-top: 1.6rem;
  }
}

检查PrimeNG版本是否过时 #

如果你用的是较旧版本的PrimeNG，可能官方已经修复了Firefox下的浮动标签兼容问题。建议升级到最新的稳定版，看看问题是否自动消失。

兜底方案：手动控制标签状态 #

要是上面的方法都不管用，咱们可以通过Angular的ngModelChange事件手动触发标签的浮动状态：

1. 在组件类里添加状态控制方法：

// 你的组件.ts文件
import { Component } from '@angular/core';

@Component({
  // 组件元数据
})
export class YourComponent {
  consulta = { dsDiagnostico1: '' }; // 你的数据模型

  updateFloatLabel(): void {
    const labelElement = document.querySelector('label[for="diagnostico1"]');
    if (!labelElement) return;

    if (this.consulta.dsDiagnostico1.trim()) {
      labelElement.classList.add('ui-float-label-active');
    } else {
      labelElement.classList.remove('ui-float-label-active');
    }
  }
}

2. 在textarea上绑定事件：

<textarea 
  pInputTextarea 
  [(ngModel)]="consulta.dsDiagnostico1" 
  name="dsDiagnostico1" 
  id="diagnostico1" 
  style="resize:none" 
  rows="4" 
  cols="100" 
  class="form-control" 
  maxLength="4000"
  placeholder=""
  (ngModelChange)="updateFloatLabel()"
  (focus)="updateFloatLabel()"
  (blur)="updateFloatLabel()"
></textarea>

这样不管浏览器怎么解析，都能通过代码逻辑强制控制标签的浮动状态啦～

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