Angular 键盘隐藏输入-离子5

我用Ionic 5/angular制作的应用程序有问题。当我专注于某个输入时，键盘会抬起并覆盖选定的输入。有没有办法通过使其自动滚动直到键盘位于所选输入的下方来避免这种行为

---

如果您使用的是cordova，则可以设置当软键盘出现（“”或“”）时UI发生的情况

为此，在

config.xml

中，在

中添加一个

标记

对于其他支持的模式，签出您只需在页面中使用“边距”

如果希望仅使用

[style.margin bottom]=“onFocus？”20rem:“null”

创建边距，并在（focus）/（blur）中的每个输入中将onFocus属性更改为true/false。为了使这个“简单”，您可以使用一个指令，该指令在服务的主题旁边生成一个，并且在主组件中您订阅了这个主题。嗯，在代码中：

服务：

@Injectable({
  providedIn: 'root',
})
export class AuxService {

  focusSubject:Subject<boolean>=new Subject<boolean>()
  constructor() { }
}

主要组成部分：

export class AppComponent{
  onFocus$=this.auxService.focusSubject

  constructor(private auxService:AuxService) { }
}

和它的.html

<div [style.margin-bottom]="(onFocus$|async)?'20rem':null">
    <p>
        Start editing to see some magic happen :)
    </p>
    <input>
</div>

开始编辑以查看发生的奇迹：）

---

我认为这应该行得通

你在使用全屏插件吗？你只需在页面中使用“边距”即可。如果希望仅使用

[style.margin bottom]=“onFocus？”20rem:“null”

创建边距，并在（focus）/（blur）中的每个输入中将onFocus属性更改为true/false-或使用指令

@Injectable({
  providedIn: 'root',
})
export class AuxService {

  focusSubject:Subject<boolean>=new Subject<boolean>()
  constructor() { }
}

@Directive({
  selector: 'input:not([type="checkbox])'
})
export class OnFocusDirective {
  @HostListener('focus')
  _() {
    this.auxService.focusSubject.next(true)
 }
  @HostListener('blur')
  __() {
    this.auxService.focusSubject.next(false)
 }
  constructor(private auxService:AuxService) { }
}

export class AppComponent{
  onFocus$=this.auxService.focusSubject

  constructor(private auxService:AuxService) { }
}

<div [style.margin-bottom]="(onFocus$|async)?'20rem':null">
    <p>
        Start editing to see some magic happen :)
    </p>
    <input>
</div>