Come posso impedire che il pulsante Vai su iPad/iPhone pubblichi il modulo

Question

Ho un modulo dinamico che deve essere visualizzato utilizzando un iPad.

Questo modulo ha un paio di pulsanti di opzione e alcuni campi di testo e un pulsante di invio.

In un iPad, il pulsante GO della tastiera virtuale deve agire e il tasto Invio, causando il primo pulsante di invio nel modulo su cui fare clic e il modulo da inviare.

Per evitare postazioni involontarie eccessive prima che il modulo sia completo, abbiamo aggiunto un pulsante di invio in più in alto nel modulo, posizionato assolutamente al di fuori dell'area visibile con onclick = "return false;". Questo dirotta l'immissione di tasti che impedisce la pubblicazione accidentale in tutti i browser tranne Safari Mobile.

Su un iPad abbiamo persino testato Opera mobile e funziona come previsto.

Ma Safari Mobile apparentemente ignora il ritorno falso poiché l'evento facendo clic sul pulsante causa un post che nessun altro browser fa, nemmeno un safari su PC.

Le mie domande sono

1: Perché Safari Mobile ignorando "return false", a presentare, c'è un altro meccanismo in gioco qui?

2: Come posso impedire a Safari mobile di pubblicare il modulo quando si fa clic su VAI? Ho effettuato numerose ricerche su Google e StackOverflow e ho trovato molti esempi, ma tutto richiede un sacco di javascript e binding di eventi e la natura dinamica del modulo insieme al contenuto generato dall'utente rende questo errore incline e piuttosto complesso poiché quasi tutti richiedono associare eventi a ogni casella di testo e area di testo.

Qualsiasi soluzione che funzioni è buona, ma più semplice è il migliore, soprattutto se non richiede molta personalizzazione del modulo o degli eventi che potrebbero entrare in conflitto con gli eventi di completamento automatico o di convalida.

Esempio TestPage: http://lab.dnet.nu/ipad.php

Answer 1

ho trovato una soluzione al mio problema.

La base del problema è che Safari mobile ignora onsubmit = "return false" sui pulsanti, funziona solo sui moduli.

Impostazione onsubmit = "return false;" sul modulo, facendo un normale pulsante (non inviare) e impostando onclick = "form.submit()".

Es.

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

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

Il pulsante Vai non attiva un pulsante normale, invia solo pulsanti. Poiché il modulo ha onsubmit="return false;" non verrà pubblicato.

Il pulsante d'altra parte, quando viene premuto fa scattare il onclick="form.submit();" che sovrascrive l'onsubmit nel modulo.

Questa soluzione sembra funzionare in qualsiasi browser in modo affidabile.

Answer 2

Sembra molto non convenzionale, in quanto ciò interrompe in generale UX generale e comportamento previsto del dispositivo.

Tuttavia, ritengo importante menzionare anche che questa soluzione si basa sull'effettivo elemento DOM <form>. Significa che il gestore onclick sul pulsante non deve utilizzare un oggetto jQuery da inviare ma l'elemento DOM.

jQuery object. Non funziona: elemento

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

DOM. Works:

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

Senza jQuery. Opere:

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

---

Inoltre, ecco un approccio simile, utilizzando jQuery di intercettare sottomette tastiera e clic solo permettendo su un pulsante. Il credito va a @levi: http://jsfiddle.net/RsKc7/

Answer 3

Ecco una risposta aggiuntiva, nel caso in cui qualcuno finisca per rincorrere questo problema come ho fatto io.

Se si utilizza jQuery, il seguente snippet dovrebbe impedire al pulsante "Vai" di attivare l'invio di un modulo (almeno lo fa su Chrome di Nexus 7 su Android 4.2.2; YMMMV). Inoltre, si noti che se si desidera consentire al tasto "Invio" di lavorare su uno qualsiasi dei tipi di input seguenti, ciò impedirà che ciò accada.

$(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; 
     } 
    }); 

Edit: Sembra this bug pause keyup/keydown in Chrome in Android> 4.3, nel qual caso questa correzione non sarà più lavorare in alcune circostanze.

Answer 4

Una risposta migliore è questa. L'altro non ti consente di utilizzare un pulsante di invio normale. Questo attacca solo il pulsante Vai.

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

Answer 5

I pulsanti di go e i pulsanti di ritorno sulle tastiere del touchscreen mobile attivano l'evento onclick del primo pulsante di invio. Per determinare se l'utente o lo script facendo clic sul pulsante, è possibile utilizzare il seguente:

$('#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; 
 
    } 
 
}