Deaktivieren Sie die Formularübermittlung über die Eingabetaste nur für einige Felder

73

Ich möchte das herkömmliche Verhalten beim Senden von Formularen beibehalten, wenn ich die Eingabetaste drücke, da die Benutzer damit vertraut sind. Aber durch Reflex drücken sie oft die Eingabetaste, wenn sie mit einem Texteingabefeld fertig sind - aber bevor sie tatsächlich mit dem vollständigen Formular fertig sind.

Ich möchte die Eingabetaste nur dann entführen, wenn der Fokus auf einer bestimmten Klasse von Eingaben liegt.

Suchen Sie Verwandte Fragen das sieht aus wie , 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 unbekannt.

jquery webforms justSteve
quelle
2
Das nennt man Merkmalserkennung. Wenn der Browser die addEventListener()Syntax zum Hinzufügen von Ereignis-Listenern verwendet, wird addEventListenerin jedem DOM-Knotenobjekt (und insbesondere im Dokumentobjekt) ein Funktionsobjekt aufgerufen . 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, document.addEventListenerist sie undefiniert (wird in false konvertiert) und der Fallback-Code im zweiten Zweig wird ausgeführt.
Tgr
Ich schätze das Erklärbare sehr. Danke!
JustSteve

Antworten:

135

Sie können die Eingabe keypressin diesen Feldern wie folgt erfassen und abbrechen :

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

Dann gib ihnen auf deinen Eingaben einfach ein class="noEnterSubmit":)

Wenn andere dies später finden, können Sie es in jQuery 1.4.3 (noch nicht veröffentlicht) auf Folgendes verkürzen:

$('.noEnterSubmit').bind('keypress', false);
Nick Craver
quelle
49
Sie müssen auch bedenken , dass bind('keypress', false);werden alle Dateneingabe verbieten . Wenn Sie dies also auf Texteingabeelemente anwenden möchten, verwenden Sie die erste Lösung
hohner
4
Wenn Sie dynamische Felder verwenden, sollten Sie dies in$('body').on('keypress', '.noEnterSubmit', function(){ ... });
seangates
3
Die Verwendung einer Klasse ist für die semantische Steuerung nicht geeignet. Verwenden Sie besser data-nosubmit oder ein ähnliches HTML 5-Datenattribut für dasselbe. $ ('[data-nosubmit]') ist dann der Selektor.
Jörg Krause
3
@JoergKrause das ist völlig subjektiv - wir verwenden js-className und es funktioniert einwandfrei, es liegt am Entwickler. Klassennamen funktionieren auch in älteren Browsern (und funktionieren schnell - native Selector Engine) und sind HTML4-gültig (nicht, dass Datenattribute tatsächlich HTML4 beschädigen).
Nick Craver
3

Fügen Sie einfach den folgenden Code in <Head>Tag in Ihren HTML-Code ein. Die Formularübermittlung erfolgt über die Eingabetaste. Für alle Felder im 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>
Kailas Mähne
quelle
3 
 <input type="text"  onkeydown="return (event.keyCode!=13);" />
Stackuser
quelle
Beeindruckend! Dieser hat für mich gearbeitet. Ich benutze ein asp:TextBoxmit AutoPostback="True"in einem UpdatePanel. Ich musste das Postback auf der Eingabetaste deaktivieren, da AutoPostbacksowohl die Eingabetaste als auch die Eingabetaste das TextChangedEreignis auslösten . Kurz gesagt, ich brauchte eine Möglichkeit, die Eingabetaste nur auf einer Taste anzuhalten, ohne das Postback zu überschreiben. Das hat perfekt funktioniert! +1
Hawkeye
Perfekte saubere Art und Weise, es zu tun!
Dennoch
1

So erlauben Sie die Eingabe nur für eine bestimmte Klasse (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;   
        }
    });
});
Silas Palmer
quelle