我的浮动标签没有按计划运行，已经尝试过不同的输入焦点但没有成功

Question

所以我正在使用 primeng 的自动完成功能并制作了一个下拉菜单（单个选择器），我似乎无法弄清楚我需要关注哪个输入（或者更好地说哪个是正确的输入）来移动我的label up (float label) 因为它根本没有移动，所以它停留

这是我的单一选择器的html：

  <div class="ui-float-label">
        <div class="ui-fluid">
            <p-autoComplete id="inputDropDown"
                            [suggestions]="selectionResults"
                            (completeMethod)="search($event)"
                            field="label"
                            [(ngModel)]="valueOfSingleSelection"
                            [minLength]="1"
                            [dropdown]="true"
                            [disabled]="!selectorProperties.enabled"
                            required
                            (onBlur)="setRequiredOnBlur()">

                <ng-template let-value pTemplate="selectedItem">
                    {{value.label}}
                </ng-template>
                <ng-template let-value pTemplate="item">
                    <div class="ui-helper-clearfix p-grid">
                        <div class="templateText p-col-12">{{ value.label }}</div>
                    </div>
                </ng-template>
            </p-autoComplete>
            <label for="inputDropDown" class="LapsFloatLabel">{{this.selectorProperties.labelMls}}</label>
        </div>
    </div>

这是 scss:

  .LapsFloatLabel {
    font-size: $font-size-text-infos;
    color: $text-color-black;
    font-family: $font-style;
    position: absolute;
    pointer-events:none;
    top: 5px;
    left: 0;
    opacity:1;
    padding: 0 2px;
    -webkit-transition: 0.2s ease-in-out;
    transition: 0.2s ease-in-out;
  }

.ui-fluid {
  input:focus {
    .LapsFloatLabel {
      top: -15px;
    }
  }

我认为我只需要将焦点放在 ui-autocomplete-input 上即可将其向上移动，但我没有成功

Answer 1

PrimeNg 确实为所有组件提供浮动标签。您可以使用以下语法：

<span class="ui-float-label">
        <p-autoComplete [(ngModel)]="country" inputId="float-input" [suggestions]="filteredCountriesSingle" (completeMethod)="filterCountrySingle($event)" field="name" [size]="30"
            [minLength]="1"></p-autoComplete>
        <label for="float-input">Username</label>
</span>

见https://github.com/primefaces/primeng/issues/4319

Answer 2

我在使用 PrimeNg 和与 textarea 链接的浮动标签时遇到了同样的问题。将 PrimeNg 更新到最新版本（此时为 11.4.0）修复了问题。

我的浮动标签没有按计划运行，已经尝试过不同的输入焦点但没有成功

My float label is not behaving as planned, already tried on different input focus but no success

sass

primeng

angular