android - examples - Error de entrada con el teclado en Galaxy S2 usando jQuery Mobile y Phonegap

jquery mobile themes

Question

Estamos desarrollando una aplicación web móvil en jQuery Mobile 1.0.1 y Phonegap 1.4.1 y hemos tenido problemas con el teclado de la galaxy s2.

Tenemos un menú que se desliza hacia fuera y contiene una entrada de búsqueda:

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

Cuando pulsamos en la entrada para que se enfoque, el teclado se abre pero no nos permite escribir nada. Supongo que la clave aquí es que nos proporciona un teclado de texto normal y no el teclado de búsqueda (que tiene una lupa). como la tecla enter

Si enfocamos la entrada cuando se abre el menú: $("#menu_search").focus() - El teclado de búsqueda está abierto cuando aparece el menú y podemos buscar PERO tan pronto como pulsamos en la entrada, el teclado cambia a Un teclado regular y no podemos escribir nada.

Otra pista es que, mientras se escribe en el teclado, la predicción automática funciona, pero al tocar la opción correcta solo se agrega un espacio a la entrada y ninguno de los otros caracteres.

Hemos intentado un montón de otros atributos en la entrada de búsqueda en vano:

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

Todo esto funciona bien en un HTC Desire con 2.2 y un deseo de ejecutar CM7 (Android 2.3.7)

Incluso intentamos cambiar la entrada a un área de texto, pero esto hizo casi lo mismo :(

También intenté:

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

para ver si eso evitaría que cambiara los teclados, pero tampoco hubo suerte.

Sin embargo, tenemos otra entrada de búsqueda en otra parte de la aplicación que funciona bien, la única diferencia es que la otra búsqueda está en una página "propper": data-role="page" y el menú está fuera de todas las otras páginas y en su propio solo conjunto a oculto inicialmente.

Por favor ayuda, estoy llorando sangre atm!

Answer 1

¿Intentaste agregar el atributo data-native-menu = "false" a tu etiqueta de entrada de búsqueda?

Answer 2

Probablemente tienes

-webkit-user-select: none;

En tu CSS en algún lugar. Si habilita la selección de texto para las entradas

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

funciona de nuevo

Answer 3

Si creo una aplicación usando phonegap + jequery, la busca en playStore "AssignmentReminder" o escribe en el campo de búsqueda koshWTF. de todas formas. Alenté este problema antes y no lo solucioné, ya que supongo que es su problema de 4.0.1, no la brecha del teléfono ni jQuery Mobile, porque todavía puedo escribir menos de 4.0.4. Espero que encuentres la respuesta porque busqué mucho la última vez y no pude encontrarla.

Answer 4

Si todavía está atascado en esto, intente actualizar a phonegap 2.0. Soluciona algunos problemas de entrada.

Answer 5

Tengo / tuve el mismo problema en mi Note II con 4.1.1 rooteado usando Phonegap 2.6.0 (aunque también puedo replicarlo en 2.5.0), jQuery Mobile 1.2.0 y jQuery 1.7.2. Mi teclado es SwiftKey 4.0.1.128.

Excepto en lugar de solo una entrada que me causa problemas, mi formulario tiene varias entradas que eventualmente me causan problemas. Es un verdadero dolor de cabeza porque es difícil de replicar: la entrada siempre funciona al principio, pero si cambias entre las entradas al azar y durante el tiempo suficiente, finalmente deja de funcionar en un momento aleatorio.

Este error solía ocurrir con bastante rapidez, por lo que sería un problema bastante importante, ya que tendría que reiniciar la aplicación para que el formulario vuelva a funcionar, lo que finalmente dejaría de funcionar nuevamente. Mi nueva estructura de forma parece funcionar bien; el error se produce después de literalmente minutos de escribir cadenas largas y cambiar aleatoriamente las entradas, lo que supongo que ningún usuario estará haciendo; pero todavía me molesta que el error esté ahí.

Traté de obtener ayuda sobre este error en el foro de jQuery Mobile, pero me hicieron algunos comentarios sarcásticos sobre cómo es probable que solo sea mi uso de ID de elemento, porque aparentemente el 99% (probablemente ni siquiera realista) de los errores de JQM provienen del uso de ID incorrecto. Sé que, de hecho, mis identificaciones son únicas en todas las páginas, pero insisten en que es un error de identificación sin siquiera intentar diagnosticar correctamente el problema, pero estoy divagando.

También debo señalar que encontré la solución CSS que se proporcionó en otra respuesta en muchos otros problemas similares en la web, pero no en este problema exacto; Si bien entiendo su uso, el CSS no solucionó el problema para mí.

Mi formulario se carga dinámicamente en un DIV de data-role = "content" dentro de un DIV de data-role = "page" , así que:

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

He encontrado que la mejor estructura de formulario , al menos en mi aplicación, para causar el error con menos frecuencia es:

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

El formulario HTML se obtiene a través de AJAX y se carga en el DIV por:

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

Naturalmente, su formulario será un poco diferente y es posible que ni siquiera tenga un formulario, ya que solo tiene una entrada de búsqueda (llegar a eso en un momento). Pero si tienes un formulario, eso es lo que mejor me funciona.

Ya que estás en Phonegap, es posible que ni siquiera necesites una acción teórica, ya que es probable que tengas jQuery para manejar la entrada, pero los formularios de estado de jQuery Mobile deben tener atributos de acción y método , por lo que no quise ir en contra de eso. Además, jQuery Mobile generalmente tiene un DIV de datos-rol = "campo-contener" alrededor de cada etiqueta / grupo de entrada, pero descubrí que el error ocurrió antes si lo hacía. Nuevamente, el error se produce en un momento arbitrario que nunca es el mismo, por lo que no sé si está directamente relacionado con el DIV.

También tengo una entrada codificada en otra página:

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

Esto parece que funciona bien. Sin embargo, no hay otras entradas para cambiar, así que lo mejor que puedo hacer para tratar de replicar el error es enfocar / desenfocar la entrada tocando en otra parte de la página. Sin embargo, siempre puedo escribir inicialmente mientras que su error no le permite escribir nada si lo comprendo correctamente. Es posible que desee probar esa estructura HTML y ver si funciona. No hay una etiqueta de formulario que rodea esa entrada.

Nuestros problemas son un poco diferentes (tengo la mayoría de mis problemas con una forma inyectada dinámicamente, mientras que la suya está codificada de lo que recopilo), pero esta es la única página que puedo encontrar en cualquier lugar que aborde directamente este problema, así que espero que esto ayuda y podemos obtener más información sobre este tema.

Answer 6

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

    });
 });