ionic-点击input时键盘自动弹出

最新推荐文章于 2023-08-15 00:42:53 发布

真由理

最新推荐文章于 2023-08-15 00:42:53 发布

阅读量4.2k

点赞数

分类专栏： ionic 文章标签： ionic键盘挡住输入框登录界面

本文链接：https://blog.youkuaiyun.com/badgirl_hong/article/details/53838225

版权

ionic 专栏收录该内容

6 篇文章

订阅专栏

在Ionic移动端应用开发中，为优化登录界面体验，需求是当点击输入框时，键盘弹出不挡住输入框，同时顶部标题保持不动，仅输入内容区域上移。用户可以不用关闭键盘直接点击登录按钮。以下代码展示了实现这一效果的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

ionic开发移动端界面时，在输入用户名和密码的时候，我希望输入法不要挡住我的输入框，并且输入框往上滚动的时候，顶部标题不要上移，只是input内容部分往上移动，点击密码输入框时我还想看见按钮，这样不用关闭输入法，也可以直接点击登录按钮，关闭输入法自动恢复成默认的界面，用户体验不错哦~；找了很多代码，以下代码是我想要的效果：

    .directive('focusInput', ['$ionicScrollDelegate', '$window', '$timeout', '$ionicPosition', function ($ionicScrollDelegate, $window, $timeout, $ionicPosition) {
        return {
            restrict: 'A',
            scope: false,
            link: function ($scope, iElm, iAttrs, controller) {
                if (ionic.Platform.isIOS()) {
                    iElm.on('focus', function () {
                        var top = $ionicScrollDelegate.getScrollPosition().top;
                        var eleTop = ($ionicPosition.offset(iElm).top) / 2
                        var realTop = eleTop + top;
                        $timeout(function () {
                            if (!$scope.$last) {
                                $ionicScrollDelegate.scrollTo(0,realTop);
                            } else {
                                try {
                                    var aim = angular.element(document).find('.scroll')
                                    aim.css('transform', 'translate3d(0px,' + '-' + realTop + 'px, 0px) scale(1)');
                                    $timeout(function () {
                                        iElm[0].focus();
                                        console.log(2);
                                    }, 100)
                                } catch (e) {
                                }

                            }
                        }, 500)
                    })
                }

            }
        }
    }])

效果图：

点击输入框前的界面：