2010-05-08 2 views
67

I ‚einreicht Form, wenn ich die Eingabetaste drücken‘ die herkömmliche beibehalten möchten Verhalten, weil die Benutzer vertraut sind. Aber oft drücken sie Enter, wenn sie mit einem Texteingabefeld fertig sind - aber bevor sie mit dem vollständigen Formular fertig sind.Disable Formularübermittlung via Enter-Taste auf nur _Some Felder

Ich möchte der einzige Schlüssel eingeben kapern, wenn dann auf eine bestimmte Klasse von Eingang konzentrieren.

Blick Related Questions aussieht wie das, was ich suche:

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

aber der if (document.addEventListener) { Teil ist mir fremd.

+2

Das heißt Feature-Erkennung. Wenn der Browser die 'addEventListener()' -Syntax zum Hinzufügen von Ereignis-Listenern verwendet, gibt es in jedem DOM-Knotenobjekt (und speziell im Dokumentobjekt) ein Funktionsobjekt mit dem Namen 'addEventListener'. Ein Funktionsobjekt wird wahr, wenn es in einen booleschen Wert konvertiert wird, sodass der erste Zweig ausgeführt wird. Wenn der Browser die addEventListener-Syntax nicht versteht, ist "document.addEventListener" nicht definiert (was in false konvertiert wird) und der Fehlercode in der zweiten Verzweigung wird ausgeführt. – Tgr

+0

Sehr zu schätzen, die erklärbar. Danke! – justSteve

Antwort

127

Sie erfassen können und kündigen die keypress auf diesen Feldern wie folgt eingeben:

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

Dann auf Ihre Eingaben nur ihnen eine class="noEnterSubmit" :)

Blick auf die Zukunft bei anderen geben dies später finden, in jQuery 1.4.3 (noch nicht aus) Sie es so weit verkürzen können:

$('.noEnterSubmit').bind('keypress', false); 
+46

Sie müssen auch bedenken, dass 'bind ('keypress', false);' _ alle Dateneingaben verbieten _. Also, wenn Sie diese anwenden möchten Eingabeelemente in Text, verwenden Sie die erste Lösung – hohner

+4

Wenn Sie dynamische Felder verwenden, sollten Sie diese auf '$ ändern (‚Körper‘). Auf (‚keypress‘,‚.noEnterSubmit‘, function () {...}); ' – seangates

+3

Die Verwendung einer Klasse ist nicht für das semantische Controlling geeignet. Verwenden Sie besser Daten-Nosubmit oder ähnliche HTML 5-Datenattribute für die gleichen. $ ('[data-nosubmit]') ist dann der Selektor. –

1

zu ermöglichen nur auf einer bestimmten Klasse eingeben (in diesem Beispiel '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; 
     } 
    }); 
}); 
3

Fügen Sie einfach in <Head> Tag in Ihrem HTML-Code folgenden Code ein. Es wird Formular Einreichung auf die Eingabe-Taste für alle Felder auf dem Formular

<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> 
Verwandte Themen