Wie kann ich die HTML-Schaltfläche auslösen, wenn Sie die Eingabetaste im Textfeld drücken?

105

Der Code, den ich bisher habe, lautet also:

<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 a <form>und ist genauso wie es in a ist <div>. Wenn ich jedoch etwas in die textboxaufgerufenen "addLinks" eingebe, möchte ich, dass der Benutzer die Eingabetaste drücken und das "linkadd" auslösen kann, das buttondann eine JavaScript-Funktion ausführt .
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();
    }
});
Ben
quelle
3
binden an keypressund suchen nach e.charCode==13(Enter-Taste).
Brad Christie
Haben Sie eine jquery-Bibliotheksreferenz hinzugefügt, bevor Sie den obigen Code verwenden?
Milind Anantwar
Ja, ich hatte die Bibliothek referenziert, nicht sicher, warum sie nicht funktionierte, aber jetzt ist es in Ordnung. Danke
Ben
Ja, wie @BradChristie erwähnt keypressoder keydownin dieser Antwort erwähnt, ist der richtige Weg.
Metakermit

Antworten:

117
$(document).ready(function(){
    $('#TextBoxId').keypress(function(e){
      if(e.keyCode==13)
      $('#linkadd').click();
    });
});
Mann Programmierer
quelle
5
Das Hinzufügen von 'return false' nach dem Klickereignis ist ebenfalls hilfreich, um eine Standardeingabe zu vermeiden. Drücken Sie auf andere Schaltflächen auf der Seite
deebs
Die Antwort von dmitry_romanov ist besser, weil es sich um reines HTML handelt.
McKay
6
@ McKay, nein ist es nicht. Schaltflächen können nicht nur für Formen verwendet werden. Tatsächlich hat die Frage des OP ausdrücklich keine Form.
Dan
2
@deebs ganz richtig, nicht sicher, was ich an dem Tag getan habe, aber ich muss einen Hirnfurz gehabt haben.
Tim bei MastersAllen
5
WARNUNG Es ist derzeit veraltet .
Константин Ван
75

Es ist …… 2020. Und ich glaube, das gilt immer noch.


VERWENDE NICHT keypress

  1. keypressEreignis wird nicht ausgelöst , wenn der Benutzer drückt eine Taste , die keinen Charakter produzieren , wie Tab, Caps Lock, Delete, Backspace, Escape, links und rechts Shift, Funktionstasten ( F1- F12).

    keypressVeranstaltung Mozilla Developer Network

    Das keypressEreignis wird ausgelöst, wenn eine Taste gedrückt wird , und diese Taste erzeugt normalerweise einen Zeichenwert . Verwenden Sie inputstattdessen.

  2. Es wurde veraltet.

    keypressEvent UI Events (W3C-Arbeitsentwurf veröffentlicht am 8. November 2018.)

    • HINWEIS | Die keypressVeranstaltung wird traditionell mit zugehörigem Erkennen eines Zeichenwert statt eines physischen Schlüssel und möglicherweise nicht auf allen Tasten in einigen Konfigurationen verfügbar sein.
    • WARNUNG | Der keypressEreignistyp wird in dieser Beschreibung als Referenz und Vollständigkeit definiert, aber diese Spezifikation deprecates Verwendung dieses Ereignistypen. In Bearbeitungskontexten können Autoren das beforeinputEreignis stattdessen abonnieren .

VERWENDE NICHT KeyboardEvent.keyCode

  1. Es wurde veraltet.

    KeyboardEvent.keyCode Mozilla Developer Network

    Veraltet | Diese Funktion wird nicht mehr empfohlen. Obwohl einige Browser dies möglicherweise noch unterstützen, wurde es möglicherweise bereits aus den relevanten Webstandards entfernt, wird gerade gelöscht oder nur aus Kompatibilitätsgründen aufbewahrt. Vermeiden Sie die Verwendung und aktualisieren Sie den vorhandenen Code nach Möglichkeit. Informationen zu Ihrer Entscheidung finden Sie in der Kompatibilitätstabelle unten auf dieser Seite. Beachten Sie, dass diese Funktion jederzeit nicht mehr funktioniert.


Was soll ich dann 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;`.
});
Константин Ван
quelle
wie wäre es mit : if (event.key == "Enter") { document.querySelector("#linkadd").click(); } ?
Anupam
1
Beachten Sie, dass dies .keynicht in allen Browsern unterstützt wird: caniuse.com/#feat=keyboardevent-key - Etwa 10% der Benutzer verwenden Browser, die dies nicht unterstützen.
Martin Tournoij
72

Es gibt eine js-freie Lösung.

Stellen Sie type=submitdie Schaltfläche ein, die Sie als Standard festlegen möchten, und type=buttonandere Schaltflächen. Im folgenden Formular können Sie nun in einem beliebigen Eingabefeld die Eingabetaste Renderdrücken , und die Schaltfläche funktioniert (obwohl es sich um die zweite Schaltfläche im Formular handelt).

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 ( formactionist eine HTML5-Funktion, aber typenicht).

dmitry_romanov
quelle
17
funktioniert nur, wenn Sie sich in einem Formular befinden, das OP verwendet kein Formular
Andrew
@ Andrew Ja, das habe ich verpasst. Jetzt kann ich es klar sehen, danke.
dmitry_romanov
4
@ Andrew, stimmt, aber es ist in den meisten Fällen trivial, es in eine Nichtstun-Form zu verpacken ...
Stephen Chung
2
Darüber hinaus funktioniert diese Lösung auf der virtuellen iOS-Tastatur [Los], deren Standardaktion das Senden ist.
Elemental
10
  1. Ersetzen Sie die buttondurch asubmit
  2. Seien Sie progressiv und stellen Sie sicher, dass Sie eine serverseitige Version haben
  3. Binden Sie Ihr JavaScript an den submitHandler des Formulars, nicht an den clickHandler der Schaltfläche

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

QUentin
quelle
6

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

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

Dies funktioniert, wenn der Eingabetyp = "button" durch den Eingabetyp = "submit" für die Standardschaltfläche ersetzt wird, die ausgelöst werden muss.

Sud
quelle
1

Fügen Sie zunächst die jquery-Bibliotheksdatei jquery hinzu und rufen Sie sie 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();
    }
});
Milind Anantwar
quelle
1

Dies sollte es tun, ich verwende jQuery, Sie können einfaches Javascript schreiben.
Ersetzen Sie sendMessage()durch Ihre Funktionalität.

$('#addLinks').keypress(function(e) {
    if (e.which == 13) {
        sendMessage();
        e.preventDefault();
    }
});
Anshu
quelle
1

Basierend auf einigen früheren Antworten habe ich Folgendes gefunden:

<form>
  <button id='but' type='submit'>do not click me</button>
  <input type='text' placeholder='press enter'>
</form>

$('#but').click(function(e) {
  alert('button press');
  e.preventDefault();
});

Schauen Sie sich die Geige an

BEARBEITEN: Wenn Sie keine zusätzlichen HTML-Elemente hinzufügen möchten, können Sie dies nur mit JS tun:

    $("input").keyup(function(event) {
        if (event.keyCode === 13) {
            $("button").click();
        }
    });     
Pablo Werlang
quelle
0

Ich fand w3schools.com Howto, ihre Try-Me-Seite ist auf der folgenden.

https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_trigger_button_enter

Dies funktionierte in meinem normalen Browser, aber nicht in meiner PHP-App, die den eingebauten PHP-Browser verwendet.

Nachdem ich ein bisschen gespielt hatte, kam ich auf die folgende reine JavaScript-Alternative, die für meine Situation funktioniert und in jeder anderen Situation funktionieren sollte:

    function checkForEnterKey(){
        if (event.keyCode === 13) {
            event.preventDefault();
            document.getElementById("myBtn").click();
        }
    }

    function buttonClickEvent()
    {
        alert('The button has been clicked!');
    }

HTML Drücken Sie die Eingabetaste im Textfeld, um die Schaltfläche zu aktivieren.

    <br />
    <input id="myInput" onkeyup="checkForEnterKey(this.value)">
    <br />
    <button id="myBtn" onclick="buttonClickEvent()">Button</button>
Scott Tovey
quelle
-1
<input type="text" id="input_id" />    

$('#input_id').keydown(function (event) {
    if (event.keyCode == 13) { 
         // Call your function here or add code here
    }
});
Rishabh Jhalani
quelle
-2

Ich benutze einen Kendo-Button. Das hat bei mir funktioniert.

<div class="form-group" id="indexform">
    <div class="col-md-8">
            <div class="row">
                <b>Search By Customer Name/ Customer Number:</b>
                @Html.TextBox("txtSearchString", null, new { style = "width:400px" , autofocus = "autofocus" })
                @(Html.Kendo().Button()
                    .Name("btnSearch")
                    .HtmlAttributes(new { type = "button", @class = "k-primary" })
                    .Content("Search")
                    .Events(ev => ev.Click("onClick")))
            </div>
    </div>
</div>
<script>
var validator = $("#indexform").kendoValidator().data("kendoValidator"),
          status = $(".status");
$("#indexform").keyup(function (event) {
    if (event.keyCode == 13) {
        $("#btnSearch").click();
    }
});
</script>
corvair61
quelle