Disabilitare l’invio del modulo tramite tasto Invio solo _some campi

Voglio mantenere il tradizionale modulo invia quando premo Enter’ comportamento, perché gli utenti hanno familiarità con. Ma, di riflesso, spesso premere invio quando hanno finito con una casella di testo di input – ma prima che in realtà sono fatte con il modulo completo.

Vorrei dirottare il tasto Invio solo quando il focus è su una certa classe di ingresso.

Cercando Le Domande Relative questo sembra quello che sto cercando:

if (document.addEventListener) {
    document.getElementById('strip').addEventListener('keypress',HandleKeyPress,false);
} else {
    document.getElementById('strip').onkeypress = HandleKeyPress;
}

ma il if (document.addEventListener) { parte è sconosciuto per me.

  • Che è chiamata funzione di rilevamento. Se il browser utilizza il addEventListener() sintassi per aggiungere listener di eventi, ci sarà una funzione di oggetto chiamato addEventListener in ogni nodo DOM oggetto (e, in particolare, nel documento in oggetto). Un oggetto funzione diventa vera quando convertito in un valore booleano, in modo che il primo ramo funziona. Se il browser non capire il metodo addEventListener sintassi, document.addEventListener sarà indefinito (che converte false) e il codice di fallback nel secondo ramo viene eseguito.
  • Apprezzo molto spiegabile. thx!
InformationsquelleAutor justSteve | 2010-05-08

 

4 Replies
  1. 133

    È possibile registrare e annullare l’invio keypress di tali campi come questo:

    $('.noEnterSubmit').keypress(function(e){
        if ( e.which == 13 ) return false;
        //or...
        if ( e.which == 13 ) e.preventDefault();
    });

    Sul ingressi solo dare loro un class="noEnterSubmit" 🙂

    Guardando avanti nel caso in cui gli altri a trovare questo più tardi, nel jQuery 1.4.3 (non ancora uscito) si può ridurre a questo:

    $('.noEnterSubmit').bind('keypress', false);
    • È inoltre necessario tenere a mente che bind('keypress', false); sarà vietare l’immissione di dati. Quindi, se si desidera applicare questo testo gli elementi di input, utilizzare la prima soluzione
    • Se si utilizza campi dinamici si dovrebbe modificare tale a $('body').on('keypress', '.noEnterSubmit', function(){ ... });
    • L’utilizzo di una classe non è appropriato per la semantica di controllo. Meglio utilizzare i dati-nosubmit o simili HTML 5 dati attributo stesso. $(‘[dati nosubmit]’) è il selettore, quindi.
    • questo è del tutto soggettivo – usiamo js-className e funziona bene, è lo sviluppatore. I nomi di classe, inoltre, il lavoro (e lavoro veloce – nativo di selezione del motore) nei browser più vecchi e sono html4 valido (non che i dati attributi di veramente pausa html4).
    • Questo funziona perfetto! Grazie!
  2. 3

    Basta aggiungere il codice riportato di seguito in <Head> Tag nel Codice HTML.
    Si Forma la presentazione sul Tasto Invio Per tutti i campi nel modulo

    <script type="text/javascript">
        function stopEnterKey(evt) {
            var evt = (evt) ? evt : ((event) ? event : null);
            var node = (evt.target) ? evt.target : ((evt.srcElement) ? evt.srcElement : null);
            if ((evt.keyCode == 13) && (node.type == "text")) { return false; }
        }
        document.onkeypress = stopEnterKey;
    </script>
  3. 1

    Per consentire l’invio solo su una classe specifica (in questo esempio, “enterSubmit’):

    jQuery(document).ready(function(){
        jQuery('input').keypress(function(event){
            var enterOkClass =  jQuery(this).attr('class');
            if (event.which == 13 && enterOkClass != 'enterSubmit') {
                event.preventDefault();
                return false;   
            }
        });
    });
  4. 1
     <input type="text"  onkeydown="return (event.keyCode!=13);" />
    • Wow! Questo ha funzionato per me. Sto usando un asp:TextBox con AutoPostback="True" in un UpdatePanel. Ho dovuto disabilitare il postback sul tasto invio, perché il AutoPostback e il tasto Invio, erano entrambi di cottura il TextChanged evento. Così, in breve ho bisogno di un modo per interrompere il tasto invio su un solo tasto, senza sovrascrivere il postback. Questo ha funzionato perfettamente! +1

Lascia un commento