16

我们正在使用 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)的欲望

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

我也试过:

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

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

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

请帮忙,我在哭血!

4

6 回答 6

2

你可能有

-webkit-user-select: none;

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

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

它再次起作用!

于 2012-04-16T07:42:30.953 回答
0

I have/had the same issue on my Note II running 4.1.1 rooted using Phonegap 2.6.0 (though I can also replicate it in 2.5.0), jQuery Mobile 1.2.0, and jQuery 1.7.2. My keyboard is SwiftKey 4.0.1.128.

Except rather than just one input causing me issues, my form has multiple inputs that eventually cause me trouble. It's a real headache because it's hard to replicate - the input always works at first, but if you switch between inputs randomly and long enough, it eventually stops working at a random time.

This error used to happen fairly quickly, so that it would make it a pretty significant issue considering I would have to restart the app to get the form working again, which would eventually stop working yet again. My new form structure seems to work well; the error occurs after literally minutes of typing long strings and randomly switching inputs, which I assume no user will be doing; but it still upsets me that the error is there.

I tried to get help on this error on the jQuery Mobile forum, but they gave me some snarky comment about how it's likely just my element ID usage, because apparently 99% (probably not even realistic) of JQM errors are from incorrect ID usage. I know for a fact my IDs are all unique across every page, but they insist it's an ID error without even trying to correctly diagnose the issue, but I digress.

I should also note that I found the CSS solution that was provided in another answer in many other similar issues across the web, but not this exact issue; while I understand its usage, the CSS did not fix the issue for me.

My form is dynamically loaded into a data-role="content" DIV inside of a data-role="page" DIV, so:

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

I've found the best form structure, at least in my application, to cause the error least frequently is:

<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>

The form HTML is fetched via AJAX and loaded into the DIV by:

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

Naturally, your form will be a bit different, and you may not even have a form since you just have a search input (getting to that in a moment). But if you do have a form, that's what works best for me.

Since you're in Phonegap, you may not even need an action theoretically since you likely have jQuery to handle the input, but jQuery Mobile docs state forms must have action and method attributes, so I didn't want to go against that. Also, jQuery Mobile usually has a data-role="field-contain" DIV around each label/input group, but I found that the error occurred sooner if I did this. Again, the error occurs at an arbitrary moment that is never the same, so I don't know if it's directly related to the DIV.

I also have an input hard-coded into another page:

<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>

This seems to work fine. However, there are no other inputs to switch to, so the best I can do to try to replicate the error is focus/unfocus the input by tapping elsewhere on the page. Though, I am always able to type initially whereas your error doesn't let you type at all if I understand correctly. You may want to try that HTML structure and see if it works. There is no form tag surrounding that input.

Our issues are a little different (I have most of my issues with a dynamically injected form whereas yours is hard-coded from what I gather), but this is the only page I could find anywhere that directly addresses this exact issue, so hopefully this helps and we can get some further insight on this issue.

于 2013-04-17T22:46:09.703 回答
0

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

于 2012-03-12T07:26:56.887 回答
0

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

于 2013-02-01T17:53:50.773 回答
0
$('#pageid').live('pageshow', function(event, ui) {
    $(this).delegate('input[data-type="search"]', 'keyup', function () {
      if($(this).val().length != 0)
        keyword = $(this).val();

    });
 });
于 2012-10-02T07:27:11.477 回答
0

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

于 2012-08-08T20:53:13.977 回答