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

Posted

技术标签:

【中文标题】使用 jQuery Mobile 和 Phonegap 在 Galaxy S2 上使用键盘输入错误【英文标题】:Input error with keyboard on Galaxy S2 using jQuery Mobile and Phonegap 【发布时间】:2012-03-04 02:56:04 【问题描述】:

我们正在使用 jQuery Mobile 1.0.1 和 Phonegap 1.4.1 开发移动网络应用程序,但在 Galaxy s2 上遇到了键盘问题。

我们有一个滑出并包含搜索输入的菜单:

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

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

如果我们在菜单打开时关注输入:$("#menu_search").focus() - 搜索键盘在菜单显示时打开,我们可以搜索但是只要我们点击输入,键盘就会变成普通键盘,我们a 无法输入任何内容。

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

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

<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

我们甚至尝试将输入更改为 textarea,但这几乎是一样的 :(

我也试过了:

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

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

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

请帮忙,我在哭血!

【问题讨论】:

在galaxy s2上你使用的是哪个版本的android? 当你把其他所有东西都去掉,只用你的输入创建一个页面时会发生什么? 你试过我的解决方案了吗?如果可行:您能接受答案吗? 【参考方案1】:

你可能有

-webkit-user-select: none;

在您的 CSS 中某处。如果您为输入启用文本选择

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

它又工作了!

【讨论】:

【参考方案2】:

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

【讨论】:

【参考方案3】:

如果您仍然坚持这一点,请尝试更新到 phonegap 2.0。它修复了一些输入问题。

【讨论】:

【参考方案4】:
$('#pageid').live('pageshow', function(event, ui) 
    $(this).delegate('input[data-type="search"]', 'keyup', function () 
      if($(this).val().length != 0)
        keyword = $(this).val();

    );
 );

【讨论】:

【参考方案5】:

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

【讨论】:

【参考方案6】:

在我的 Note II 上运行 4.1.1,使用 Phonegap 2.6.0(尽管我也可以在 2.5.0 中复制它)、jQuery Mobile 1.2.0 和 jQuery 1.7.2,我遇到了/遇到了同样的问题。我的键盘是 SwiftKey 4.0.1.128。

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

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

我试图在 jQuery Mobile 论坛上获得有关此错误的帮助,但他们给了我一些尖刻的评论,说这很可能只是我的元素 ID 使用,因为显然 99%(甚至可能不现实)的 JQM 错误来自不正确身份证使用。我知道我的 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>

至少在我的应用程序中,我发现导致错误频率最低的最佳 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 文档状态表单必须具有 actionmethod 属性,所以我不想反对。此外,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 标签。

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

【讨论】:

以上是关于使用 jQuery Mobile 和 Phonegap 在 Galaxy S2 上使用键盘输入错误的主要内容,如果未能解决你的问题,请参考以下文章

如何使用 jquery 或 jquery mobile mobile 根据日期列出数据

jquery mobile,结合jquery mobile“页面”和内部页面

有人知道 jquery mobile 和 jquery 的哪些版本可以一起使用吗?

jQuery .load() 不适用于 PhoneGap Build 和 jQuery Mobile

jQuery 还是 jQuery Mobile?

jquery , jquery ui 和 jquery mobile 如何组合在一起