聚焦Ionic中的输入字段不起作用

时间:2015-08-17 08:20:07

标签: cordova keyboard focus ionic-framework ionic

我一直在做我的研究,似乎这在Ionic社区中并不是一个不常见的问题或问题。我有一个带有视图输入的简单表单:

<input type="text" id="firstName" placeholder="First Name" ng-model="registerData.firstName">
...

在我的控制器中,我尝试着重于该领域:

document.getElementById("firstName").focus();

当然它不起作用,所以我见过的一些帖子建议,我必须添加Ionic Keyboard Plugin。我这样做是通过运行:

cordova plugin add https://github.com/driftyco/ionic-plugins-keyboard.git

然后我显然必须在我的config.xml中设置这个:

<preference name="KeyboardDisplayRequiresUserAction" value="false"/>
<feature name="Keyboard">
  <param name="ios-package" onload="true" value="IonicKeyboard"/>
</feature>

然后显然一切都应该有效......但事实并非如此。有什么我想念的吗?

1 个答案:

答案 0 :(得分:10)

您可以使用autofocus,但这只会在您第一次打开页面时起作用,因此请尝试使用此指令。它对我来说就像一个魅力。
JS:

angular.module('app').directive('focusMe',['$timeout',function ($timeout) {
  return {
    link: function (scope, element, attrs) {
      if (attrs.focusMeDisable === "true") {
        return;
      }
      $timeout(function () {
        element[0].focus();
        if (window.cordova && window.cordova.plugins && window.cordova.plugins.Keyboard) {
          cordova.plugins.Keyboard.show(); //open keyboard manually
        }
      }, 350);
    }
  };
}]);

HTML:

<input type="text" id="firstName" placeholder="First Name" ng-model="registerData.firstName" focus-me focus-me-disable={{disableFlag}}>