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

【问题标题】：lost focus of input text while keyboard appears - iOS PhoneGap Application出现键盘时失去输入文本的焦点 - iOS PhoneGap 应用程序
【发布时间】：2014-02-22 11:45:31
【问题描述】：

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

谁能帮我解决这个问题。

【问题讨论】：

标签： ios cordova textfield lostfocus

【解决方案1】：

这是一个已在 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();
  }
};

【讨论】：

在他们修复之前有什么技巧可以克服这个问题。

【解决方案2】：

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

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

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

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

【讨论】：

这对我没有帮助。你知道当软键盘出现时如何停止调整视图大小吗？
我发现一些人提到在他们的视口元标记中添加“maximum-scale=1”可以解决这个问题。这对我不起作用，因为我的应用程序仅适用于移动设备，而且 iOS7 安装在 iPad 上时最终会放大。
我最近注意到这个问题是 iOS 10 和 11。这似乎已经解决了。
这并没有为我解决这个问题，但是将 * 更改为 html 就可以了。
谢谢，我遇到了和你一样的问题，已经解决了。

【解决方案3】：

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

改变这个：

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

到

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

然后只需为在 setTimeout 内点击时设置焦点的字段编写一个事件处理程序。这对我最近非常有效。

【讨论】：

这可以让焦点起作用并使键盘显示在焦点上，但是当您单击未获得焦点的字段时，光标会短暂出现然后消失，而键盘仍然存在。

【解决方案4】：

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

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

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

【讨论】：

【解决方案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 插件。

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

【讨论】：