我正在创建一种形式的问题.这种形式:
<form name="myForm"> <label ng-hide="hide" class="item item-input" > <span class="input-label">How much minutes?</span> <input ng-pattern="onlyNumbers" name="number" type="text" ng-model="taskMinutes"> </label> </form>
几乎位于屏幕中间,但当用户点击输入字段开始输入时,焦点未正确执行.键盘显示但它隐藏了该字段.如果我开始输入,则会执行焦点并相应地移动屏幕.有关如何解决此问题的任何提示?
更新:这是整个屏幕:
<ion-view> <ion-content> <div class="list"> <label class="item item-input"> <span class="input-label">Task</span> <input type="text" ng-model="taskInfo"> </label> <label class="item "> Can this task be measured? <p> <ion-checkBox ng-repeat="item in devList" ng-model="item.checked" ng-checked="item.checked" ng-click="change(item)"> {{ item.text }} </ion-checkBox> </p> </label> <form name="myForm"> <label ng-hide="hide" class="item item-input" > <span class="input-label">How much minutes?</span> <input ng-pattern="onlyNumbers" name="number" type="tel" ng-model="taskMinutes"> </label> </form> <label class="item" ng-controller="tasksCtrl"> <button ng-disabled="!myForm.number.$valid" class="button button-block button-royal" type="submit" ng-click="addTask()">Add Task</button> </label> </div>
这就是我解决它的方式:
注意:您必须安装cordova键盘插件(https://github.com/driftyco/ionic-plugin-keyboard)
var windowHeight = window.innerHeight; $scope.$on('$ionicView.loaded',function() { // fallback + warning var scrollView = {scrollTo: function() { console.log('Could not resolve scroll delegate handle'); }}; var setupKeyboardEvents = function() { $scope.unbindShowKeyboardHandler = $scope.$on('KeyboardWillShowNotification',function(info) { var input = angular.element(document.activeElement); var body = angular.element(document.body); var top = input.prop('offsetTop') //+ angular.element(input.prop('offsetParent')).prop('offsetTop'); var temp = angular.element(input.prop('offsetParent')); var tempY = 0; while (temp && typeof(temp.prop('offsetTop')) !== 'undefined') { tempY = temp.prop('offsetTop'); top += tempY; temp = angular.element(temp.prop('offsetParent')); } top = top - scrollView.getScrollPosition().top; var inputHeight = input.prop('offsetHeight'); var keyboardHeight = info.keyboardHeight; var requiredSroll = windowHeight - keyboardHeight > top + inputHeight + 11 ? 0 : windowHeight - keyboardHeight - top - inputHeight - 12; $timeout(function(){ scrollView.scrollTo(0,- requiredSroll || 0,true); }); }); $scope.unbindHideKeyboardHandler = $scope.$on('KeyboardWillHideNotification',function() { $timeout(function(){ scrollView.scrollTo(0,true); }); }); }; $timeout(function(){ var instances = $ionicScrollDelegate.$getByHandle('your-scroll-handle')._instances; instances.length && (scrollView = instances[instances.length - 1]); }).then(setupKeyboardEvents); }); $scope.$on('$destroy',function(){ $scope.unbindShowKeyboardHandler(); $scope.unbindHideKeyboardHandler(); });
并在应用程序运行:
window.addEventListener('native.keyboardshow',keyboardShowHandler); window.addEventListener('native.keyboardhide',keyboardHideHandler); function keyboardShowHandler(info){ //alert('Keyboard height is: ' + e.keyboardHeight); console.log("KeyboardWillShowNotification: " + JSON.stringify(info)); $rootScope.$broadcast('KeyboardWillShowNotification',info); } function keyboardHideHandler(info){ $rootScope.$broadcast('KeyboardWillHideNotification',info); }
并在模板中:
<ion-content scroll-handle="your-scroll-handle">