para - manual de programacion android pdf

HTML: ¿Por qué el navegador de Android muestra "Ir" en lugar de "Siguiente" en el teclado?

Question

Tengo un formulario de inicio de sesión HTML que contiene los siguientes elementos (en este orden):

• input type=text (entrada de nombre de usuario)
• input type=password (contraseña)
• input type=submit (botón de inicio de sesión)

¿Por qué el navegador de Android muestra el botón "Ir" en el teclado virtual en lugar del botón "Siguiente" cuando el foco está en la text input ? Esto hace que el usuario no pueda iniciar sesión muy fácilmente porque después de ingresar el nombre de usuario, el usuario presiona el botón inferior derecho en el teclado (generalmente la acción correcta) y el formulario se enviará con una contraseña vacía, lo que obviamente no va a funcionar . [Este comportamiento tendría sentido en caso de que mi navegador se configurara para recordar contraseñas y el administrador de contraseñas podría completar la contraseña. Sin embargo, este no es el caso aquí, ya que puede probarse a sí mismo a continuación.]

Me gustaría que el texto del tipo de entrada tenga el botón "Siguiente" y la contraseña del tipo de entrada (la última entrada antes del envío) para tener el botón "Ir".

Un ejemplo de formulario problemático está en https://peda.net/:login (este formulario contiene código para detectar la tecla "Enter" para la entrada y evita enviar el formulario a menos que se enfoque la última entrada de formulario visible).

¿Conoces una solución real para este problema? Sé que si estuviera implementando una aplicación nativa, usaría android:imeOptions="actionNext" (ver Cómo cambiar el botón "Ir" del teclado de la tecla programable de Android a "Siguiente" ). Sin embargo, en este caso se trata de un formulario HTML y un navegador predeterminado de Android.

El problema es visible con al menos las siguientes configuraciones:

• Aplicación de sistema "navegador" que se ejecuta en Android 2.3.4 (Cyanogenmod 7)
• Aplicación de sistema "navegador" que se ejecuta en Android 4.2.2 (Cyanogenmod 10.1)
• Aplicación de sistema "navegador" que se ejecuta en Android 4.3.1 (Cyanogenmod 10.2 M1)
• Aplicación de sistema "navegador" (navegador AOSP) que se ejecuta en Android 4.4.2 (Cyanogenmod 11.0 M3)
• La aplicación de sistema "Navegador" (Navegador AOSP) que se ejecuta en Android 5.5.1 (Cyanogenmod 12.1) [tiene un icono de flecha en lugar de la palabra "Ir"]
• La aplicación de sistema "Navegador" (Navegador AOSP) que se ejecuta en Android 6.0.1 (Cyanogenmod 13.0) [tiene un icono de flecha en lugar de la palabra "Ir"]

Answer 1

El navegador Android siempre muestra Ir para los campos de entrada porque algunos formularios en la web (especialmente los cuadros de búsqueda) no tienen botón de enviar, y solo se pueden activar presionando Enter (Go es equivalente a Enter).

En cambio, algunas versiones de Android mostrarán una tecla de tabulación en la parte inferior derecha del teclado para facilitar la navegación entre los campos de formulario.

No creo que puedas evitar ninguno de estos comportamientos.

Dos soluciones posibles:

1. Use JavaScript para ignorar el envío del formulario de inicio de sesión hasta que ambas entradas no estén en blanco:

   <form name="loginForm" onsubmit="return document.loginForm.user.value != '''' && document.loginForm.pass.value != ''''">
       <input type="text" name="user">
       <input type="password" name="pass">
       <input type="submit" value="Login">
   </form>

2. La solución más limpia sería establecer que se requieran ambas entradas utilizando el nuevo atributo HTML5 requerido , pero el navegador Android aún no lo admite. Sin embargo, un buen enfoque sería complementar el atributo requerido con un respaldo de JavaScript como el descrito por CSSKarma .

Answer 2

Este es el problema de Chromium si quieres verlo: https://bugs.chromium.org/p/chromium/issues/detail?id=410785

Aquí hay una solución para Android que cambia la "entrada" en la entrada del usuario para que "pestañee" al campo de contraseña (y no envíe el formulario):

http://jsbin.com/zakeza/1/quiet

<form action="?">
  User <input type=text onkeypress=key(event)><br><br>
  Password <input id=pw type=password><br><br>
  <input type=submit>
</form>

<script>
  function key(event) {
    if (event.charCode == 13 && /Android/.test(navigator.userAgent)) {
      event.preventDefault();
      document.getElementById(''pw'').focus();
    }
  }
</script>

Editar: Nota Windows Phone también coloca Android en la UA, por lo que necesita pruebas que funcionen en Windows Phone (y Android Firefox).

Answer 3

No podemos evitar este comportamiento predeterminado porque no hay una etiqueta input type="next" disponible en HTML a partir de ahora. Entonces, por defecto, aparece el botón "Ir". Debajo del enlace que tiene una lista de etiquetas de tipo de entrada disponibles: http://www.w3schools.com/tags/att_input_type.asp

Answer 4

Para agregar a la respuesta de John, Android siempre agrega ''Ir'' a las entradas de texto y siempre agrega ''Siguiente'' al número de entradas . Me encantaría escuchar a la persona responsable de esta elección explicar su lógica.

El diseño del teclado es malo en este sentido, porque cada usuario con el que he probado hasta ahora ha pensado que el gran botón azul en el teclado debe ser el botón que lo lleve al siguiente campo de formulario y luego en el último campo de formulario le permite envíe el formulario

iOS es incluso peor a este respecto, ya que ofrecen un botón "Ir" en cada campo de formulario y no hay forma de desplazarse por los campos. Es bueno que a Apple le guste hacer que las computadoras sean simples para las personas, pero a veces asumiendo que a las personas les gusta lo simple se les puede negar la posibilidad de presumir que las personas son idiotas.

Perdón por esa diatriba. Tengo algo constructivo para ofrecer:

Si su último campo de formulario es type = number, entonces hay un pequeño truco que funcionará tanto en Android como en iOS: agregue un texto invisible al formulario con onfocus = "$ (''# thisForm''). Submit ( ); ". En Android, este campo aparecerá brevemente a la vista: en iOS no lo hará. Para que la situación de Android sea más aceptable, puede establecer un valor para el ingreso de texto como "Cerrar este formulario", o puede establecer su ancho en 0, lo que hará que el campo de formulario no sea del ancho 0, pero aún muy pequeño .

Horrible pirateo, pero bueno, échale la culpa a la gente de UI en Google y Apple.

Answer 5

Para evitar confusiones para el usuario, permita que el botón GO funcione como solo botón de entrada.

Para esto, use una etiqueta de formulario, pero para evitar presentaciones incompletas use el atributo deshabilitado en el botón de enviar.

$("input:not(.submit)").bind(''input'',function(){
var isValid = validateInputs();

if(isValid)
                {
                    $(''.submit'').removeAttr(''disabled'');
                }
                else
                {
                    $(''.submit'').attr(''disabled'',''disabled'');
                }

});

Ahora, para evitar la recarga de la página, no use los atributos de acción o onsubmit en la etiqueta del formulario, en su lugar use

$(''#formid'').submit(function(){

var disabled=$(''.submit'').attr(''disabled'');
                if(disabled==''disabled'')
                {
                    return;
                }

callOnSubmitFunction();
return false;
}
);

return false es importante aquí para evitar la recarga de la página.

a excepción de Chrome, Firefox y los navegadores predeterminados de Android muestran los botones prev y next que funcionarán como botones de tabulación, por lo tanto, use los atributos de tabindex adecuados en el elemento de entrada del formulario.

Answer 6

vea Reemplazar el botón Ir en el teclado virtual con Siguiente en Phonegap .

Para una navegación rápida, vea este plunker . Para seguir el código completo

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>


<form action="" id="form">
First name: <input type="text" name="firstname">
Last name: <input type="text" name="lastname">
  <select name="select" readonly="readonly">
  <option>Select Something</option>
  </select>
  Last name: <input type="text" name="lastname" disabled="disabled">
Select <select name="select" id="selectBox">
               <option>Select Something</option>
       </select>
    Last name: <input type="text" name="lastname">
Select <select name="select" readonly="readonly">
  <option>Select Something</option>
  </select>
  <button type="submit">Submit</button> 
</form>

<script>
(function($) {
    $.fn.enterAsTab = function(options) {
        var settings = $.extend({
            ''allowSubmit'': false
        }, options);
        $(this).find(''input, select, textarea, button'').live("keydown", {localSettings: settings}, function(event) {
            if (settings.allowSubmit) {
                var type = $(this).attr("type");
                if (type == "submit") {
                    return true;
                }
            }
            if (event.keyCode == 13) {
                var inputs = $(this).parents("form").eq(0).find(":input:visible:not(:disabled):not([readonly])");
                var idx = inputs.index(this);
                if (idx == inputs.length - 1) {
                    idx = -1;
                } else {
                    inputs[idx + 1].focus(); // handles submit buttons
                }
                try {
                    inputs[idx + 1].select();
                }
                catch (err) {

                }
                return false;
            }
        });
        return this;
    };
})(jQuery);

$("#form").enterAsTab({ ''allowSubmit'': true});
</script>

NOTA: no olvide reemplazar el método .live() de jquery con .on() si usa una versión más nueva de jquery que 1.9.