根据Angular中的Click Event输入向上移动页面

Question

我在我的angular应用程序中实现了NPM屏幕键盘。它运行良好。但当我从页面底部选择输入时，我遇到了一些问题。输入是不可见的bcz键盘过来的输入。所以我需要向上滚动或在页面底部创建空白，同时执行单击事件。如何实现这一点？还有其他建议吗？

这里提供了一个stackblitz url供您参考：

https://stackblitz.com/edit/onscreen-keyboard-qfg8n4?file=src%2Fkeyboard%2Fkeyboard.component.css

Answer 1

在键盘组件.ts中使用document.activeElement.scrollIntoView({block:"center"})

ngOnInit() {
this.keyboardSubscription = this.keyboard.keyboardRequested.subscribe(
(show) => {
if (show) {
document.activeElement.scrollIntoView({ block: 'center' });
this.shown = true;
} else {
this.shown = false;
}
}
);
}

尝试将焦点元素滚动到屏幕中心(垂直(。你也可以使用其他参数：https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView

然后，只需确保你在页面底部有足够的空间，并使用一个伪分区。

<div>
<input appOskInput type="text" />
</div>
<div>
<input appOskInput type="text" />
</div>
<div>
<input appOskInput type="text" />
</div>
<div>
<input appOskInput type="text" />
</div>
<div>
<input appOskInput type="text" />
</div>
<div style="height:250px"></div>
<app-keyboard></app-keyboard>

堆叠闪电战：https://stackblitz.com/edit/onscreen-keyboard-ewduwg?file=src/keyboard/keyboard.component.ts

编辑：动态添加间隔符

将键盘html分离为一个空格和键盘，将shown类绑定到shown变量

<div class="spacer" [class.shown]="shown"></div>
<div class="keyboard" [class.shown]="shown">
...
</div>

CSS

.spacer {
display: none;
height: 240px;
}
.spacer.shown {
display: block;
}
.keyboard {
text-align: center;
background-color: #eee;
position: fixed;
height: 200px;
width: 80%;
left: 10%;
bottom: -240px;
padding: 20px 0;
transition: all 250ms ease-in-out;
}
.keyboard.shown {
bottom: 0;
}

然后我们需要在尝试滚动之前强制检测变化

export class KeyboardComponent implements OnInit {
shown: boolean;
private keyboardSubscription: Subscription;
constructor(
private el: ElementRef,
private keyboard: KeyboardService,
private changeDetect: ChangeDetectorRef
) {}
ngOnInit() {
this.keyboardSubscription = this.keyboard.keyboardRequested.subscribe(
(show) => {
if (show) {
this.shown = true;
this.changeDetect.detectChanges();
document.activeElement.scrollIntoView({ block: 'center' });
} else {
this.shown = false;
}
}
);
}
...

堆叠闪电战：https://stackblitz.com/edit/onscreen-keyboard-ewduwg?file=src/keyboard/keyboard.component.ts