在Ionic中聚焦输入框无法正常工作

Question

我已经做了一些研究，似乎在Ionic社区中这不是一个罕见的问题或疑问。我有一个简单的表单，里面包含一些输入：

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

在我的控制器中，我尝试将焦点放在该字段上：

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

当然它不能正常工作，因此根据我看到的一些帖子建议，我必须添加 Ionic键盘插件。通过运行以下命令来添加：

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>

然后显然一切都应该正常工作...但事实并非如此。我是否漏掉了什么？

- user818700

---

在输入标签中使用自动对焦属性： <input type="text" id="firstName" placeholder="名字" ng-model="registerData.firstName" autofocus> - Anil kumar

问题是，我有一堆输入，正在迭代以查看是否提供了值。然后，当其中一个没有提供时，我想使该特定字段聚焦。因此，这不仅仅是在加载时设置一个字段聚焦的问题。 - user818700

你尝试过将getElementById放在平台准备好的函数内吗？我刚刚测试了一个带有以下代码的示例应用程序，它可以正常工作。$ionicPlatform.ready(function() { document.getElementById("firstName").focus(); }) - Sabarish

Answer 1

你可以使用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}}>

- Mudasser Ajaz

---

嗨@mudasserajaz，当我使用您的指令时，它会将焦点放在具有指令的任何输入上，无论它是true还是false..？ - user818700

嘿@DeanGrobler，我已经更新了HTML。现在你可以从控制器中控制disableFlag。 - Mudasser Ajaz

@MudasserAjaz，你的解决方案在我的浏览器中运行良好，但在iOS中无法聚焦文本框或打开键盘。它对你有效吗？ - domoindal

它对我有效，但你需要在你的config.xml中添加以下内容：<preference name="KeyboardDisplayRequiresUserAction" value="false"/> - S. Roose