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

Question

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

所以我想做的，就像这里:Scroll page on text input focus for mobile devices?

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

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

编辑:我通过 input:focus > body 尝试使用 CSS，但显然这是不可能，因为输入字段在正文中，而不是相反。因此，如果有一个 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"/>

奇怪.. 我刚刚尝试了该指令，但确实没有用。不过，将指令更改为使用 snake case 可以解决问题。