Angular input / ion-input ion-searchbar 实现软件盘换行 改 搜索 并且触发搜索方法 Android iOS适用

2023-06-05,,

Angular 实现软件盘 换行 改 搜索 并且除非 搜索方法:
 
 Form 必须有 action="javascript: return true;” 
 input / ion-input  type="search”   (keyup.enter)="search()”  ---  iOS13英文输入法无效

最终 :(keypress)="search($event)" 

 search(event?) {
if (!(event && event.keyCode === 13)) {
return;
}
// search fun
}

 实测 ion-searchbar 需要设置 inputmode="" 而官方文档 inputmode="search"有时真的不靠谱!!

示例:

<form *ngIf="data" [formGroup]="formGroup" action="javascript: return true;">
<ng-container *ngFor="let item of data.data.formObj" [ngSwitch]="item.type">
<ng-container *ngSwitchCase="'input'">
<ion-item class="post-item">
<ion-label>{{item.label}}</ion-label>
<ion-input type="search"
[maxlength]="item.maxLength"
[attr.placeholder]="item.placeHolder
[formControlName]="item.formKey"
[(ngModel)]="item.value" (keyup.enter)="search()"> </ion-input>
</ion-item>
</ng-container>
</ng-container>
</form>
<ion-searchbar (keyup.enter)="search()" inputmode="" [attr.placeholder]="item?.placeHolder" [(ngModel)]="item.value" [formControlName]="item.formKey"></ion-searchbar>

Angular input / ion-input ion-searchbar 实现软件盘换行 改 搜索 并且触发搜索方法 Android iOS适用的相关教程结束。

《Angular input / ion-input ion-searchbar 实现软件盘换行 改 搜索 并且触发搜索方法 Android iOS适用.doc》

下载本文的Word格式文档,以方便收藏与打印。