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

Question

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

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

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

那么我该如何在 Angular 中做到这一点呢？这可能吗？

编辑：我尝试使用CSS, by 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"/>

奇怪..我刚刚尝试了该指令，但确实不起作用。不过，将指令更改为使用蛇形大小写确实可以解决问题。