Wie löse ich eine HTML-Schaltfläche aus, wenn die „Enter“-Taste in einem Textfeld gedrückt wird?

Lesezeit: 6 Minuten

Bens Benutzeravatar
Ben

Also der Code, den ich bisher habe, ist:

<fieldset id="LinkList">
    <input type="text" id="addLinks" name="addLinks" value="http://">
    <input type="button" id="linkadd" name="linkadd" value="add">
</fieldset>

Es ist nicht in einem <form> und ist genauso wie innerhalb von a <div>. Wenn ich jedoch etwas in die textbox namens “addLinks” Ich möchte, dass der Benutzer die Eingabetaste drücken und das “linkadd” auslösen kann button die dann eine JavaScript-Funktion ausführen.
Wie kann ich das machen?
Vielen Dank

Bearbeiten:
Ich habe diesen Code gefunden, aber er scheint nicht zu funktionieren.

$("#addLinks").keyup(function(event){
    if(event.keyCode == 13){
        $("#linkadd").click();
    }
});

  • zu binden keypress und prüfen e.charCode==13 (Eingabetaste).

    – Brad Christie

    18. Oktober 2012 um 12:56 Uhr

  • Haben Sie eine jquery-Bibliotheksreferenz hinzugefügt, bevor Sie den obigen Code verwenden?

    – Milind Anantwar

    18. Oktober 2012 um 13:02 Uhr

  • Ja, ich habe auf die Bibliothek verwiesen, bin mir nicht sicher, warum sie nicht funktioniert hat, aber jetzt ist sie in Ordnung. Vielen Dank

    – Ben

    18. Oktober 2012 um 13:25 Uhr

  • Ja, wie @BradChristie erwähnte, keypress oder keydown in dieser Antwort erwähnt sind der Weg zu gehen.

    – metakermit

    9. Juli 2015 um 14:37 Uhr

$(document).ready(function(){
    $('#TextBoxId').keypress(function(e){
      if(e.keyCode==13)
      $('#linkadd').click();
    });
});

  • Das Hinzufügen von „return false“ nach dem Klickereignis ist ebenfalls hilfreich, um zu vermeiden, dass auf anderen Schaltflächen auf der Seite standardmäßig die Eingabetaste gedrückt wird

    – deebs

    3. März 2015 um 19:45 Uhr

  • Die Antwort von dmitry_romanov ist besser, weil es sich um reines HTML handelt.

    – McKay

    26. Juni 2015 um 12:40 Uhr

  • @McKay, nein ist es nicht. Schaltflächen können für andere Dinge als Formulare verwendet werden. Tatsächlich ist die Frage des OP ausdrücklich nicht in einer Form.

    – Dan

    2. August 2015 um 18:39 Uhr

  • @deebs ganz richtig, ich bin mir nicht sicher, was ich an dem Tag gemacht habe, aber ich muss einen Gehirnfurz gehabt haben.

    – Tim bei MastersAllen

    18. Mai 2016 um 8:26 Uhr

  • WARNUNG Es ist derzeit veraltet.

    – Константин Ван

    22. August 2017 um 0:56 Uhr

Benutzeravatar von Константин Ван
Константин Ван

Es ist, ja, 2021. Und ich glaube, das gilt immer noch.


VERWENDE NICHT keypress

  1. keypress Ereignis ist nicht ausgelöst wenn der Benutzer drückt eine Taste, die kein Zeichen erzeugtwie zum Beispiel Tab, Caps Lock, Löschen, Rücktaste, Fluchtlinks rechts WechselFunktionstasten(F1F12).

keypress Veranstaltung Mozilla-Entwicklernetzwerk

Das keypress Ereignis wird ausgelöst, wenn eine Taste nach unten gedrückt wirdund dieser Schlüssel normalerweise erzeugt einen Zeichenwert. Verwenden input stattdessen.

  1. Es ist veraltet.

keypress Veranstaltung UI-Ereignisse (Arbeitsentwurf des W3C veröffentlicht am 8. November 2018.)

  • HINWEIS | Das keypress Ereignis wird traditionell mit verbunden Erkennen a Zeichen Wert statt eines physischen Schlüsselsund ist in einigen Konfigurationen möglicherweise nicht auf allen Schlüsseln verfügbar.
  • WARNUNG | Das keypress Der Ereignistyp wird in dieser Spezifikation zur Referenz und Vollständigkeit definiert, aber diese Spezifikation missbilligt die Verwendung dieses Ereignistyps. In Bearbeitungskontexten können Autoren die abonnieren beforeinput Ereignis statt.

VERWENDE NICHT KeyboardEvent.keyCode

  1. Es ist veraltet.

KeyboardEvent.keyCode Mozilla-Entwicklernetzwerk

Veraltet | Diese Funktion wird nicht mehr empfohlen. Obwohl einige Browser es möglicherweise noch unterstützen, wurde es möglicherweise bereits aus den relevanten Webstandards entfernt, wird möglicherweise fallen gelassen oder nur aus Kompatibilitätsgründen beibehalten. Vermeiden Sie es, es zu verwenden, und aktualisieren Sie nach Möglichkeit vorhandenen Code. sehen die Kompatibilitätstabelle unten auf dieser Seite, um Ihre Entscheidung zu erleichtern. Beachten Sie, dass diese Funktion jederzeit ausfallen kann.


Was soll ich denn verwenden? (Die gute Praxis)

// Make sure this code gets executed after the DOM is loaded.
document.querySelector("#addLinks").addEventListener("keyup", event => {
    if(event.key !== "Enter") return; // Use `.key` instead.
    document.querySelector("#linkadd").click(); // Things you want to do.
    event.preventDefault(); // No need to `return false;`.
});

  • wie wäre es mit: if (event.key == "Enter") { document.querySelector("#linkadd").click(); } ?

    – Anupam

    29. Juli 2019 um 7:41 Uhr


  • Beachten Sie, dass .key wird nicht in allen Browsern unterstützt: caniuse.com/#feat=keyboardevent-key – Etwa 10 % der Benutzer verwenden Browser, die dies nicht unterstützen.

    – Martin Tournij

    31. Juli 2019 um 15:27 Uhr

  • @Anupam Gut, wenn Sie der Meinung sind, dass Sie den Standard-Event-Handler des Webbrowsers nicht verhindern müssenwas in diesem Fall (keyup), existiert wahrscheinlich nicht.

    – Константин Ван

    20. November 2020 um 3:55 Uhr


  • @MartinTournoij Nun, mach dir darüber keine Sorgen. Diejenigen, die nicht wissen, was .key Es ist jetzt sehr gering (unter 3%).

    – Константин Ван

    20. November 2020 um 4:02 Uhr

  • Es gibt also immer noch keine schöne Möglichkeit, dies mit HTML zu tun. Damals in VB6-Tagen gab es zwei Eigenschaften für Schaltflächen: “Abbrechen” und “Standard”. Wenn die Schaltfläche Abbrechen=True hatte, dann löste das Drücken von Escape die Schaltfläche aus. Wenn „Default“ wahr war, wird die Schaltfläche „Enter“ oder „Return“ ausgelöst. Ich nehme an, ich könnte das mit ein oder zwei Klassen nachholen. Hoffe W3C liest das 🙁

    – Rätsel Plus

    16. Februar 2021 um 19:45 Uhr

Es gibt eine js-freie Lösung.

Satz type=submit auf die Schaltfläche, die Sie als Standard verwenden möchten, und type=button zu anderen Tasten. Jetzt können Sie im folgenden Formular in allen Eingabefeldern die Eingabetaste drücken und die Render Schaltfläche funktioniert (obwohl es die zweite Schaltfläche im Formular ist).

Beispiel:

    <button id='close_renderer_button' class="btn btn-success"
            title="Перейти к редактированию программы"
            type=button>
      <span class="glyphicon glyphicon-edit"> </span> Edit program
    </button>
    <button id='render_button' class="btn btn-primary"
            title="Построить фрактал"
            type=submit
            formaction='javascript:alert("Bingo!");'>
      <span class="glyphicon glyphicon-send"> </span> Render
    </button>

Getestet in FF24 und Chrome 35 (formaction ist HTML5-Funktion, aber type ist nicht).

  • funktioniert nur, wenn Sie sich in einem Formular befinden, das OP verwendet kein Formular

    – Andreas

    16. Juli 2015 um 15:27 Uhr

  • @Andrew Ja, das habe ich übersehen. Jetzt sehe ich es klar, danke.

    – dmitri_romanow

    16. Juli 2015 um 15:38 Uhr


  • @Andrew, stimmt, aber es ist in den meisten Fällen trivial, es in eine Do-Nothing-Form zu packen …

    – Stephen Chung

    2. August 2016 um 13:06 Uhr

  • Zusätzlich funktioniert diese Lösung auf der virtuellen iOS-Tastatur [Go] Schaltfläche, deren Standardaktion das Senden ist.

    – Elementar

    22. März 2017 um 13:53 Uhr

  • Wenn Sie es in ein Formular ohne Aktion einschließen, funktioniert es in Firefox nicht, da das Absenden ein Neuladen der Seite auslöst. Ich konnte dieses Problem lösen, indem ich die Lösung von stackoverflow.com/a/13118834/12440938 (action="javascript:void(0);")

    – Gabriel

    9. April 2021 um 19:20 Uhr


  1. Ersetze das button mit einer submit
  2. Sei progressivstellen Sie sicher, dass Sie eine serverseitige Version haben
  3. Binden Sie Ihr JavaScript an die submit Handler des Formulars, nicht der click Handler der Schaltfläche

Durch Drücken der Eingabetaste im Feld wird das Absenden des Formulars ausgelöst, und der Submit-Handler wird ausgelöst.

Sie könnten Ihrer Eingabe einen Ereignishandler wie folgt hinzufügen:

document.getElementById('addLinks').onkeypress=function(e){
    if(e.keyCode==13){
        document.getElementById('linkadd').click();
    }
}

Benutzeravatar von Sud
Sud

Es funktioniert, wenn input type=”button” durch input type=”submit” für die Standardschaltfläche ersetzt wird, die ausgelöst werden muss.

Benutzeravatar von Milind Anantwar
Milind Anantwar

Fügen Sie zunächst die jquery-Bibliotheksdatei hinzu Abfrage und rufen Sie es in Ihrem HTML-Kopf auf.

und dann Jquery-basierten Code verwenden …

$("#id_of_textbox").keyup(function(event){
    if(event.keyCode == 13){
        $("#id_of_button").click();
    }
});

1436770cookie-checkWie löse ich eine HTML-Schaltfläche aus, wenn die „Enter“-Taste in einem Textfeld gedrückt wird?

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy