使用 jQuery Mobile 和 Phonegap 在 Galaxy S2 上使用键盘输入错误

Question

我们正在 jQuery Mobile 1.0.1 和 Phonegap 1.4.1 中开发移动 Web 应用程序，并且在 Galaxy s2 上遇到了键盘问题。

我们有一个滑出的菜单，其中包含一个搜索输入：

<input type="search" placeholder="Search..." name="search" id="menu_search" data-role="none" />

当我们点击输入以使其获得焦点时，键盘会打开，但不允许我们输入任何内容。我想这里的一个线索是，它给了我们一个常规的文本键盘而不是搜索键盘（它有一个放大镜作为回车键）

如果我们在菜单打开时聚焦输入： $("#menu_search").focus() - 搜索键盘当菜单显示时打开，我们能够搜索，但是一旦我们点击输入，键盘就会变成普通键盘，我们无法输入任何内容。

另一个线索是，在键盘中输入时，自动预测会起作用，但是当点击正确的选项时，只会在输入中添加一个空格，而不会添加任何其他字符。

我们在搜索输入上尝试了许多其他属性，但均无济于事：

<input type="search" placeholder="Search..." name="search" id="menu_search" value="" data-role="none" autocomplete="off" autocorrect="off" autocapitalization="off" role="textbox" aria-autocomplete="list" aria-haspopup="true" style="-webkit-appearance:searchfield;" class="ui-autocomplete-input" />

这在运行 2.2 的 HTC Desire 和运行 CM7 (Android 2.3.7) 的desire 上运行良好，

我们甚至尝试将输入更改为文本区域，但这效果很好几乎同样的事情:(

我也尝试过：

$("#menu_search").live('focus',function(event){
   event.preventDefault();
});

看看这是否会阻止它更换键盘，但也没有运气。

但是，我们在应用程序的其他地方确实有另一个搜索输入，它工作正常，唯一的区别是其他搜索位于一个“propper”页面：data-role="page" 并且菜单位于所有其他页面之外，并且最初设置为隐藏，

请帮忙，我哭了！

Answer 1

可能有

-webkit-user-select: none;

你的 CSS 中 某个地方。如果您启用输入的文本选择，

input, textarea { -webkit-user-select: text; }

它会再次起作用！

Answer 2

您是否尝试将 data-native-menu="false" 属性添加到搜索输入标记中。

Answer 3

如果您仍然遇到这个问题，请尝试更新到phonegap 2.0。它修复了一些输入问题。

Answer 4

$('#pageid').live('pageshow', function(event, ui) {
    $(this).delegate('input[data-type="search"]', 'keyup', function () {
      if($(this).val().length != 0)
        keyword = $(this).val();

    });
 });

Answer 5

我使用phonegap + jequery创建一个应用程序，您可以在playStore“AssignmentReminder”中查找它或在搜索字段中输入koshWTF。
反正。我之前鼓励过这个问题，但没有解决它，因为我猜它的 4.0.1 问题不是电话差距也不是 jquery mobile ，因为我仍然可以在 4.0.4 及更低版本下输入。希望你能找到答案，因为我上次搜索了很多，但找不到。

Answer 6

我在使用 Phonegap 2.6.0（虽然我也可以在 2.5.0 中复制它）、jQuery Mobile 1.2.0 和 jQuery 1.7.2 运行 4.1.1 的 Note II 上遇到同样的问题。我的键盘是 SwiftKey 4.0.1.128。

除了一个输入导致我出现问题之外，我的表单有多个输入最终给我带来麻烦。这确实令人头痛，因为它很难复制 - 输入一开始总是有效，但如果您在输入之间随机切换且时间足够长，它最终会在随机时间停止工作。

这个错误过去发生得相当快，因此考虑到我必须重新启动应用程序才能使表单再次工作，这将使其成为一个非常重要的问题，这最终将再次停止工作。我的新表单结构似乎运行良好；在输入长字符串并随机切换输入几分钟后就会发生错误，我认为没有用户会这样做；但错误的存在仍然让我感到不安。

我试图在 jQuery Mobile 论坛上寻求有关此错误的帮助，但他们给了我一些尖锐的评论，说这可能只是我的元素 ID 使用情况，因为显然 99%（可能甚至不现实）的 JQM 错误都来自不正确的 ID 使用。我知道事实上我的 ID 在每个页面上都是唯一的，但他们坚持认为这是一个 ID 错误，甚至没有尝试正确诊断问题，但我离题了。

我还应该指出，我发现了网络上许多其他类似问题的另一个答案中提供的 CSS 解决方案，但不是这个确切的问题；虽然我了解它的用法，但 CSS 并没有为我解决这个问题。

我的表单动态加载到 data-role="content" DIV 中的 data-role="page" DIV 中，因此：

<div data-role="page">
    <div data-role="content" id="my-form-holder">
    </div>
</div>

我找到了最好的 < em>form 结构，至少在我的应用程序中，最不常见的错误是：

<form id="account-add" action="add-edit-account.php" method="post" data-ajax="false" autocomplete="off">
    <div data-role="fieldcontain" class="ui-hide-label">
        <label for="custom-name">
        </label>
        <input name="custom-name" placeholder="Account Name" value="Service Name Here" type="text"><br>

        <label for="custom-1">
        </label>
        <input name="custom-1" placeholder="User ID" type="text"><br>

        <label for="custom-2">
        </label>
        <input name="custom-2" placeholder="Password" type="password"><br>

        <input type="hidden" name="action" value="add-2">
        <input type="hidden" name="newserviceid" value="3">
        <input type="hidden" name="userid" value="1">
        <input id="account-add-submit" type="submit" name="account-add-submit" value="Add Account">
    </div>
</form>

表单 HTML 通过 AJAX 获取并通过以下方式加载到 DIV 中：

$(ajaxData).appendTo("#my-form-holder").trigger("create");

当然，您的表单会有点不同，您可能会甚至没有表格，因为您只有搜索输入（稍后会谈到这一点）。但如果你确实有表格，那对我来说最有效。

由于您在 Phonegap 中，理论上您甚至可能不需要操作，因为您可能有 jQuery 来处理输入，但 jQuery Mobile 文档状态表单必须具有操作和方法属性，所以我不想反对这一点。另外，jQuery Mobile 通常在每个标签/输入组周围都有一个 data-role="field-contain" DIV，但我发现如果我这样做，错误会更快发生。同样，错误发生在任意时刻，而且永远不会相同，所以我不知道它是否与 DIV 直接相关。

我还有一个输入硬编码到另一个页面：

<div data-role="fieldcontain" class="ui-hide-label">
    <label for="service-search-input">
    </label>
    <input name="service-search-input" id="service-search-input" placeholder="Enter a service to search for" type="search">
</div>

这似乎工作正常。但是，没有其他输入可以切换到，因此我能做的最好的尝试就是通过点击页面上的其他位置来聚焦/取消聚焦输入。不过，我总是能够最初输入，而如果我理解正确的话，您的错误根本不允许您输入。您可能想尝试该 HTML 结构，看看它是否有效。该输入周围没有 form 标记。

我们的问题有点不同（我的大部分问题都与动态注入的表单有关，而您的问题是根据我收集的内容进行硬编码的），但这是我可以在任何地方找到的唯一页面，直接解决这个确切的问题，所以希望这个有帮助，我们可以进一步了解这个问题。