[英]mat-autocomplete auto-hide placeholder text on input focus
我根據文檔中的示例使用帶有輸入的 mat-autocomplete 組件,並且我已將輸入配置為使用標簽並具有非浮動占位符文本,如下所示:
<mat-form-field floatLabel="never">
<input
type="text"
placeholder="Search..."
aria-label="Number"
matInput
[formControl]="search"
[matAutocomplete]="auto">
<button
mat-button
*ngIf="search.value"
matSuffix
mat-icon-button
aria-label="Clear" (click)="clearSearch()">
<mat-icon>close</mat-icon>
</button>
<mat-autocomplete
#auto="matAutocomplete"
(optionSelected)="goToResult($event)">
<mat-option
*ngFor="let result of searchResults"
[value]="result">
{{result.id}}
</mat-option>
</mat-autocomplete>
</mat-form-field>
當點擊輸入開始輸入字符時,占位符不會消失,直到我輸入第一個字符。 我是否缺少一些應該設置的配置\\屬性?
還是我需要設置占位符值綁定並自己設置\\清除它?
謝謝
您可以刪除輸入中mat-placeholder
並在mat-form-field
添加一個mat-placeholder
並使用類自定義 css。
HTML文件:
<form class="example-form">
<mat-form-field floatLabel="never">
<input
matInput
type="text"
aria-label="Number"
matInput [formControl]="myControl"
[matAutocomplete] ="auto">
<mat-placeholder class="placeholder">Search</mat-placeholder>
<mat-autocomplete #auto="matAutocomplete">
<mat-option *ngFor="let option of options" [value]="option">
{{option}}
</mat-option>
</mat-autocomplete>
</mat-form-field>
</form>
CSS文件:
.mat-focused .placeholder {
color: transparent;
}
.example-form {
min-width: 150px;
max-width: 500px;
width: 100%;
}
.example-full-width {
width: 100%;
}
使用 OOTB matInput
並僅隱藏占位符“on-float”
/*hide the floating mat input part */
.mat-form-field-should-float .mat-form-field-label-wrapper {display: none;}
完整的解決方案
.middle-cut .mat-form-field-should-float .mat-form-field-label-wrapper {display: none;}
.middle-cut .mat-form-field-should-float .mat-form-field-infix { margin-top: -10px;}
.middle-cut .mat-form-field-infix {border:0; padding-top:0; padding: .1375em 0; }
.middle-cut .mat-form-field-label{top: 0.85em;}
您可以使用 mat-placeholder 並通過在(焦點)事件上添加一個類來隱藏它,這將隱藏占位符。 請參閱此鏈接https://stackoverflow.com/a/60021883/9026103
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.