¿Cómo puedo evitar que el botón Ir del iPad/iPhone publique el formulario

Question

Tengo un formulario dinámico que se mostrará con un iPad.

Este formulario tiene un par de botones de opción y algunos campos de texto y un botón de enviar.

En un iPad, se supone que el botón GO del teclado virtual debe actuar junto con la tecla Intro, haciendo que el primer botón de enviar en el formulario se haga clic y el formulario se publique.

Para evitar publicaciones involuntarias excesivas antes de que se complete el formulario, agregamos un botón de envío adicional más arriba en el formulario, completamente ubicado fuera del área visible con onclick = "return false;". Esto secuestra la tecla Intro impidiendo la publicación accidental en todos los navegadores excepto en Safari Mobile.

En un iPad incluso probamos Opera móvil y funciona como se esperaba.

Pero Safari Mobile aparentemente ignora el resultado falso, ya que al hacer clic en el botón se genera una publicación que no hace ningún otro navegador, ni siquiera Safari en la PC.

Mis preguntas son

1: ¿Por qué es Mobile Safari ignorar "return false" en la presente, ¿hay otro mecanismo en juego aquí?

2: ¿Cómo puedo evitar que Safari mobile publique el formulario al hacer clic en IR?

He realizado numerosas búsquedas en Google y Stackoverflow y encontré muchos ejemplos, pero todos requieren una gran cantidad de javascript y enlaces de eventos y la naturaleza dinámica del formulario junto con el contenido generado por el usuario hace que este error sea bastante complejo ya que casi todo eventos vinculantes para cada cuadro de texto y área de texto.

Cualquier solución que funcione es buena pero cuanto más simple, mejor, especialmente si no requiere mucha personalización del formulario o eventos que pueden entrar en conflicto con los eventos de autocompletado o validación.

Ejemplo testpage: http://lab.dnet.nu/ipad.php

Answer 1

he encontrado una solución a mi problema.

La base del problema es que Safari mobile ignora onsubmit = "return false" en los botones, solo funciona en los formularios.

Configuración onsubmit = "return false;" en el formulario, haciendo un botón normal (no enviar) y configurando onclick = "form.submit()".

Ej.

<form method="post" onsubmit="return false;"> 
    ... //Other fields here 

    <input type="button" value="Send" onclick="form.submit();" /> 
</form> 

El botón Ir no acciona un botón normal, solamente los botones de envío. Dado que el formulario tiene onsubmit="return false;", no se publicará.

El botón en el otro lado, al hacer clic en activa el onclick="form.submit();" que anula la publicación en el formulario.

Esta solución parece funcionar de manera confiable.

Answer 2

parece muy poco convencional, ya que esto rompe básicamente UX general y el comportamiento del dispositivo se esperaba.

Sin embargo, creo que también es importante mencionar que esta solución se basa en el elemento real <form> DOM. Lo que significa que el controlador onclick en el botón no debe usar un objeto jQuery para enviar, sino el elemento DOM.

objeto jQuery. No funciona: Elemento

<input type="button" value="Send" onclick="$("#myform").submit();" /> 

DOM. Obras:

<input type="button" value="Send" onclick="$("#myform").get(0).submit();" /> 

Sin jQuery. Obras:

<input type="button" value="Send" onclick="document.getElementById('myform').submit();" /> 

---

Además, aquí es un enfoque similar, usando jQuery para interceptar el teclado presenta y sólo permiten clic en un botón. El crédito va a @levi: http://jsfiddle.net/RsKc7/

Answer 3

Aquí es una respuesta adicional, en caso de que alguien termina persiguiendo a este problema como lo hice.

Siempre y cuando estés usando jQuery, el siguiente fragmento debe prevenir el botón "Go" de desencadenar una sumisión de la forma (al menos lo hace en Nexus 7 de Chrome en Android 4.2.2; YMMMV). Además, tenga en cuenta que si desea permitir que la tecla "Enter" funcione en cualquiera de los tipos de entrada a continuación, evitará que esto suceda.

$(document.body).on('keydown', 'input:text, input[type=password], input[type=email]',  
    function (e) { 
     // Android maps the "Go" button to the Enter key => key code 13 
     if (e.keyCode == 13) { 
      return false; 
     } 
    }); 

Editar: Parece this bug rompe keyup/keydown en Chrome en Android> 4,3, en cuyo caso esta revisión ya no funcionará en algunas circunstancias.

Answer 4

mejor respuesta es la siguiente. El otro no le permite usar un botón de envío regular. Esto ataca solo el botón de ir.

$("body").keydown(function(){ 
    if(event.keyCode == 13) { 
     document.activeElement.blur(); 
     return false; 
    } 
}); 

Answer 5

Los botones Ir y los botones de retorno en los teclados de la pantalla táctil móvil activan el evento onclick de su primer botón de envío. Para determinar si su usuario o script clic en el botón, puede utilizar el siguiente:

$('#mybuttonId').onclick(e) { 
 
    if (e.screenX && e.screenX != 0 && e.screenY && e.screenY != 0) { 
 
    //This is the user clicking on the button. 
 
    } else { 
 
    //This is not the user, but a script , do nothing. 
 
    return false; 
 
    } 
 
}