聚焦时如何使用 Angular 滚动/移动输入字段到屏幕顶部

Question

我不知道从哪里开始，但我正在尝试制作一个移动应用程序，我的屏幕中间有一个输入字段。问题是弹出的键盘太大了，你几乎看不到输入字段。

那么我想做什么，就像这里一样：在移动设备的文本输入焦点上滚动页面？

是将输入字段向下滚动到顶部...当它被用户聚焦/点击时。当您单击其他地方时，输入字段应返回到原来的位置。

那么如何在 Angular 中执行此操作？这可能吗？

编辑：我用CSS尝试了它，通过input:focus > body，但显然这是不可能的，因为输入字段在正文中，而不是相反。因此，如果有一个 CSS 修复程序可以将所有其他元素推开并专注于输入字段（或移动它并模糊整个屏幕），我也很乐意！

Answer 1

只需一个简单的指令就可以做到：

app.directive('focus-scroll', function() {
    return {
        restrict: 'A',
        link: function(scope, element, attrs) {
          element.bind('focus', function(){
            console.log('focus triggered');
            element.scrollIntoView();
          });
        }
    }
});

并使用它：

<input focus-scroll type="text" ng-model="something"/>

奇怪..我只是尝试了指令，确实没有用。不过，将指令更改为使用蛇壳确实起到了作用。

Answer 2

我创建了一些可能对阅读本文的人有帮助的东西。它实际上是用 Angular 2+ 制作的，但应该适用于 js。

在 html 中：

 <input id={{uniqueID}} (focus)="scrollTo(uniqueID)" /> // item.uniqueID if array, can be numbers to if static

在组件函数scrollTo(uniqueID)中：

var elmnt = document.getElementById(uniqueID); // let if use typescript
elmnt.scrollIntoView(); // this will scroll elem to the top
window.scrollTo(0, 0); // this will scroll page to the top

这将确保输入将显示在内部元素的顶部或顶部（div，span，无论您想怎么称呼它）。