键盘出现时输入文本失去焦点 - iOS PhoneGap 应用程序

Question

我在使用cordova 2.7和html输入文本在iOS 7上开发电话间隙应用程序时遇到问题。 当我选择输入文本时，键盘会弹出。 但无法输入任何内容，因为焦点已丢失。 我必须再次选择才能输入文本。

谁可以帮我这个事。

Answer 1

我遇到了类似的问题，键盘会出现，但文本框中没有显示任何输入内容。 我的是由 css 引起的 -

* {
  -webkit-user-select: none; /* prevent copy paste */
}

我通过覆盖文本框的样式解决了这个问题 -

input[type="text"] {
    -webkit-user-select: text;
}

Answer 2

cordova 应用程序中有一个配置文件 config.xml，默认情况下，cordova 不允许您通过 javascript 调用控制焦点，这意味着键盘可以“消失”

改变这个：

<preference name="KeyboardDisplayRequiresUserAction" value="true" />

到

<preference name="KeyboardDisplayRequiresUserAction" value="false" />

然后只需为该字段编写一个事件处理程序，当在 setTimeout 中点击时，它会将焦点设置在自身上。 这最近对我来说非常有效。

Answer 3

这是一个已知问题，已在 Cordova 中记录： https : //issues.apache.org/jira/browse/CB-5115 。 我也想解决这个问题，因为它并不理想。

这是那里解释的解决方法，

window.document.body.ontouchstart = (e) => {
  if (e.target.tagName === 'INPUT' || e.target.tagName === 'TEXTAREA') {
    e.preventDefault();
    e.target.focus();
  }
};

Answer 4

我遇到了这个问题，发现我已经在另一个 Phonegap 项目中使用它修复了它。 它与@mld 的答案基本相同，但使用 html。 使用 * 不适用于我在 iOS 上的应用。

html {
  -webkit-user-select: none; /* prevent text selection */
}

input[type="text"] {
    -webkit-user-select: text;
}

Answer 5

我在 Ionic V1 / Angular 1.5 项目中遇到了这个问题。 这个修复对我有用：

window.addEventListener('native.keyboardshow', function () {
  if ( document.activeElement != document.getElementById('my-input') && document.activeElement.nodeName != 'INPUT' ){
    document.getElementById('my-input').focus()
  }
});

当我们点击输入时，键盘就会出现。 然后我们可以检查我们的输入元素是否真的被聚焦。 如果没有，我们手动对焦。 如果它是另一个输入，我们将不会关注它。

我在我的组件的$onInit函数中调用了它 - 当你的组件被$onDestroy销毁时，确保移除事件监听器。 这也假设您正在使用ionic-plugin-keyboard插件。

这适用于一个输入，但如果您在同一页面上有多个输入，您可能需要额外的逻辑来防止您的应用程序在键盘打开时专注于错误的输入。