Ошибка ввода с клавиатуры на Galaxy S2 с использованием jQuery Mobile и Phonegap - PullRequest
16 голосов
/ 12 февраля 2012

Мы разрабатываем мобильное веб-приложение для 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() - Клавиатура поиска открыта, когда отображается меню, и мы можем искать НО, как только мы нажимаем на вход, клавиатура превращается в обычную клавиатуру, и мы не умеет ничего печатать.

Еще одна подсказка заключается в том, что при наборе текста на клавиатуре автопрогноз работает, но при нажатии на правильный параметр к входу добавляется только пробел, а остальные символы отсутствуют.

Мы пробовали кучу других атрибутов в поиске, но безрезультатно:

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

Все это отлично работает на HTC Desire под управлением 2.2 и желании под управлением CM7 (Android 2.3.7)

Мы даже попытались изменить ввод на textarea, но это сделало почти то же самое: (

Я тоже пробовал:

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

посмотреть, не помешает ли это переключению клавиатуры, но не повезло.

Тем не менее, у нас есть другой поисковый ввод в другом месте приложения, который работает нормально, с той лишь разницей, что другой поиск находится на «правильной» странице: data-role="page", и меню находится за пределами всех других страниц и в изначально он просто скрыт.

Пожалуйста, помогите, я плачу, кровь атм!

Ответы [ 6 ]

2 голосов
/ 16 апреля 2012

У вас, вероятно, есть

-webkit-user-select: none;

В вашем CSS где-то.Если вы включите выделение текста для входных данных

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

, он снова будет работать!

0 голосов
/ 18 апреля 2013

У меня / была та же проблема на моем 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 связаны с неправильным использованием идентификатора.Я точно знаю, что все мои идентификаторы уникальны на каждой странице, но они настаивают на том, что это ошибка идентификатора, даже не пытаясь правильно диагностировать проблему, но я отступаю.

Я должен также отметить, что нашел решение CSSэто было предоставлено в другом ответе во многих других подобных проблемах в сети, но не в этом конкретном вопросе;хотя я понимаю его использование, CSS не устранил проблему для меня.

Моя форма динамически загружается в data-role = "content" DIV внутри данных-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 должны содержать action и атрибуты метода , поэтому я не хотел идти против этого.Кроме того, jQuery Mobile обычно имеет data-role = "field-contains" 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 , окружающего этот ввод.

Наши проблемы немного отличаются (у меня большинство проблем с динамически внедренной формой, в то время как ваша проблема жестко запрограммирована из того, что я собираю), но это единственная страница, которую я могу найти где-либо, которая напрямую касается именно этой проблемы, так что, надеюсь, это поможет, и мы сможем получить более глубокое понимание этой проблемы.

0 голосов
/ 01 февраля 2013

Я создаю приложение, используя телефонную пробел + jequery, вы ищете его в PlayStore "AssignmentReminder" или введите в поле поиска koshWTF. тем не мение. Я поощрял эту проблему раньше и не исправил ее, так как я предполагаю, что проблема 4.0.1 не связана с пробелами в телефоне и jquery mobile, потому что я все еще могу печатать под 4.0.4 и ниже. надеюсь, вы найдете ответ на этот вопрос, потому что в прошлый раз я искал aloot и не смог его найти.

0 голосов
/ 02 октября 2012
$('#pageid').live('pageshow', function(event, ui) {
    $(this).delegate('input[data-type="search"]', 'keyup', function () {
      if($(this).val().length != 0)
        keyword = $(this).val();

    });
 });
0 голосов
/ 09 августа 2012

Если вы все еще застряли на этом, попробуйте обновить до phonegap 2.0.Исправлены некоторые проблемы с вводом.

0 голосов
/ 12 марта 2012

Вы пытались добавить атрибут data-native-menu = "false" в тег ввода поиска.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...