我正在使用 AngularJS 开发 Ionic 应用程序。
我得到的输入很少(登录/注册的东西),当按下 Enter 键时 - 在 android 上是 go 按钮,在 iOS 上是等效的 - 这是 KeyCode 13
,它会在帮助下专注于下一个输入自定义指令。
它在网络浏览器上运行良好,但在手机上,它聚焦下一个输入,然后焦点立即丢失,键盘隐藏自身,迫使用户再次点击输入。
这是HTML:
<ion-view title="First Screen" hide-nav-bar="true" id="firstScreen" class=" ">
<ion-content padding="false" style="background: url(img/XAYpMMdUTvWFVAnrEhUi_restaurant.jpg) no-repeat center;background-size:cover;" class=" manual-remove-top-padding" scroll="false">
<div class="">
<img src="img/awdYDbeeSlSHCToXN5Lw_logo.png" width="auto" height="30%" style="display: block; margin-left: auto; margin-right: auto;">
</div>
<label class="item item-input " id="emailInput" name="email">
<input class="invisible-input" type="email" placeholder="Email" ng-model="user.email" focus-me="currentInput == 0" ng-keyup="inputKeyEvent($event, 0)">
</label>
<label class="item item-input " id="passwordInput" name="password">
<input class="invisible-input" type="password" placeholder="Mot de passe" focus-me="currentInput == 1" ng-model="user.password" ng-keyup="inputKeyEvent($event, 1)">
</label>
<label ng-show="isSignUp" class="item item-input " ng-class="{'animated fadeInLeft': isSignUp, 'animated fadeOutLeft' : !isSignUp && changed }" id="confirmPasswordInput" name="password">
<input class="invisible-input" type="password" placeholder="Confirmation du mot de passe" focus-me="currentInput == 2" ng-model="user.confirmation" ng-keyup="inputKeyEvent($event, 2)">
</label>
<div>
{{response}}
</div>
<div class="actionButtonContainer">
<button ng-click="signin()" id="loginButton" class=" button button-balanced button-full">Se oonnecter</button>
<button ng-click="signup()" id="signupButton" class=" button button-energized button-full" ng-disabled="disableSignUp()">S'inscrire</button>
</div>
</ion-content>
这是指令:
directive('focusMe', function() {
return {
link: function (scope, element, attrs) {
scope.$watch(attrs.focusMe, function (value) {
if (value === true) {
element[0].focus();
}
});
}
};
这是涉及的 Controller 方法:
$scope.inputKeyEvent = function(event, inputId)
{
$scope.response = event.keyCode;
if (event.keyCode == 13)
{
$scope.currentInput = inputId + 1;
if ($scope.currentInput == 2 && !$scope.isSignUp)
$scope.signin();
else if ($scope.currentInput == 3 && $scope.isSignUp)
$scope.signup();
}
}
感谢您的帮助!
编辑
问题出在我的 genymotion 模拟器上,它在真手机上运行得很好(至少在我的手机上是这样)
最佳答案
我认为你应该在未聚焦的元素上调用 blur()
方法。
我已经在 ionic 和 cordova 中完成了它,并且效果很好。
此外,将 focus()
包裹在 timeout
的下一个元素上($timeout
用于 Angular 版本或 setTimeout
for vanillajs) 所以焦点将在另一个范围内执行,并在模糊完成后执行。
你应该有这样的东西:
$scope.inputKeyEvent = function(event, id) {
// prevent default
event.preventDefault();
// blur on the unfocused element
event.target.blur();
// focus on next element
// wrapped in timeout so it will run
// in "another thread"
$timeout(function() {
// If you want to follow all angular best practices
// Make a broadcast and read the event in the link function
// of your directive
var obj = document.getElementById(nextId);
// Check if object exists
if(obj) {
obj.focus();
}
});
}
关于javascript - 使用javascript聚焦后立即在Android上输入松散焦点,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37378548/