这里有新鲜出炉的精品教程,程序狗速度看过来!
ionic 是个高级的 HTML5 移动端应用框架,是个很漂亮的使用 HTML5 开发混合移动应用前端框架。
ionic 开发移动端界面时,在输入用户名和密码的时候,输入法不要挡住我的输入框,并且输入框往上滚动的时候,顶部标题不要上移,下面给大家分享实现代码,一起看看吧
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)
- })
- }
- }
- }
- }])
效果图:
点击输入框前的界面:
点击输入框后的界面:
以上所述是小编给大家介绍的 ionic 开发中点击 input 时键盘自动弹出,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 phperz 网站的支持!
来源: http://www.phperz.com/article/17/0720/329226.html