Question

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

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

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

那么我怎么能在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，但是您想要调用它）。

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

2 个答案: