Prevenire l'invio del modulo al tasto Invio per il testo

So che questa domanda è stata già presentata ma non sono riuscito a trovare una risposta soddisfacente per la mia situazione. Quindi ti sto chiedendo di nuovo.Prevenire l'invio del modulo al tasto Invio per il testo

Ho un modulo semplice con 2 caselle di testo e un pulsante di invio. Dopo che l'utente immette il testo in una casella di testo, non dovrebbe essere in grado di inviare tramite il tasto Invio, solo il pulsante di invio dovrebbe consentire loro di inviare. Ho pensato intrappolando la pressione del tasto entrare e ritorno falso dal gestore di eventi onChange farebbe il trucco, ma a quanto pare no, questo provoca ancora un invio di form ...

function doNotSubmit(element) { 

     alert("I told you not to, why did you do it?"); 
     return false; 

} 
</script> 


<form id="myForm" action="MyBackEnd.aspx" method="post"> 

<table> 
    <tbody> 
    <tr> 
     <td> 
      Joe: <input id="JoeText" type="text" onChange="doNotSubmit(this)"> 
     </td> 
     <td> 
      Schmoe: <input id="SchmoeText" type="text" onChange="doNotSubmit(this)" > 
     </td> 
    </tr> 
    </tbody> 
</table> 

<input type=submit>

ho testato su entrambi Chrome e FF (ultime versioni).

Puoi per favore mostrarmi come impedire l'invio del modulo?

Grazie.

fonte

2015-05-21 AbuMariam

possibile duplicato del [impedire agli utenti di presentare forma premendo Invio] (http://stackoverflow.com/questions/895171/prevent-users-from-submitting-form-by-hitting-enter) – dan08

First , Penso che tu voglia onkeypress o onkeydown invece di onchange. Secondo, da dove viene 'e' nella funzione' doNotSubmit'? – ray

di piggy back su @ anwser di Dasein Vuoi evitare il default comportamento invece di interrompere la propagazione (ovvero restituire false):

document.getElementById("myForm").onkeypress = function(e) { 
 
    var key = e.charCode || e.keyCode || 0;  
 
    if (key == 13) { 
 
    alert("I told you not to, why did you do it?"); 
 
    e.preventDefault(); 
 
    } 
 
}

<form id="myForm" action="MyBackEnd.aspx" method="post"> 
 

 
<table> 
 
    <tbody> 
 
    <tr> 
 
     <td> 
 
      Joe: <input id="JoeText" type="text"> 
 
     </td> 
 
     <td> 
 
      Schmoe: <input id="SchmoeText" type="text" > 
 
     </td> 
 
    </tr> 
 
    </tbody> 
 
</table> 
 

 
<input type=submit>

fonte

2015-05-21 22:38:55 devkaoru

@Dasein e devkaoru, penso che il tuo suggerimento funzionerà ma in questo momento quando inserisco il javascript così com'è, rende la pagina caricata restituisce un errore "document.getElementById (...) null". Qualche idea sul perché questo sta accadendo, sono sicuro che il nome del modulo "myForm" sia corretto? – AbuMariam

è probabile che lo script venga caricato prima che il DOM sia pronto. usa un evento pronto per impedire che ciò accada: http://stackoverflow.com/questions/9899372/pure-javascript-equivalent-to-jquerys-ready-how-to-call-a-function-when-the – devkaoru

Sì, quello era. – AbuMariam

penso che questo dovrebbe fare:

document.getElementById("myInput").onkeypress = function(e) { 
    var key = e.charCode || e.keyCode || 0;  
    if (key == 13) { 
     alert("I told you not to, why did you do it?"); 
     return false; 
    } 
}

fonte

2015-05-21 21:32:28 user2755140

No, scusa, non funziona. Il modulo viene ancora inviato. Ma stranamente non vedo neanche l'avviso. – AbuMariam

E sì, ho cambiato il parametro getElementbyId in "JoeText". – AbuMariam

Curiosamente, funziona per me, come puoi controllare qui: http://jsfiddle.net/a70wuoo9/1/ – user2755140

Se si include un pulsante di invio allora il comportamento modulo predefinito è di presentare su Inserisci chiave. Per evitare invii accidentali è possibile aggiungere una finestra di conferma all'evento onsubmit (modulo A). Un'altra alternativa è quella di sostituire il pulsante di invio con il proprio (modulo B). Tuttavia, l'utente dovrebbe quindi fare clic sul pulsante per inviare.

Run frammento di testare (testato in Chrome, Firefox, IE e 5-11)

<html> 
 
<body> 
 
Form A: This form submits on enter key  
 
<form action="handler.aspx" method="post" onsubmit="return confirm('submit form?')"> 
 
    <input type="text" > 
 
    <input type="text" > 
 
    <input type="submit"> 
 
</form> 
 
<p> 
 
Form B: This form submits only on button click<br> 
 
<form action="hanlder.aspx" method="post" > 
 
    <input type="text" > 
 
    <input type="text" > 
 
    <input type="button" value="submit" onclick="if (confirm('Submit form?')) document.forms[1].submit()"> 
 
</form> 
 
    
 
</body> 
 
</html>

fonte

2015-05-21 22:13:42 Roberto

Prevenire l'invio del modulo al tasto Invio per il testo

risposta

Problemi correlati