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

来源：互联网发布：批处理软件静默卸载编辑：程序博客网时间：2024/05/17 06:28

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)                    })                }            }        }    }])

效果图：

点击输入框前的界面：

点击输入框后的界面：

0 0