Klicken Sie mit JavaScript auf die Eingabetaste in einem Textfeld, um eine Schaltfläche auszulösen

Dann codiere es einfach ein!

<input type = "text"
       id = "txtSearch" 
       onkeydown = "if (event.keyCode == 13)
                        document.getElementById('btnSearch').click()"    
/>

<input type = "button"
       id = "btnSearch"
       value = "Search"
       onclick = "doSomething();"
/>

Fand dies heraus:

<input type="text" id="txtSearch" onkeypress="return searchKeyPress(event);" />
<input type="button" id="btnSearch" Value="Search" onclick="doSomething();" />

<script>
function searchKeyPress(e)
{
    // look for window.event in case event isn't passed in
    e = e || window.event;
    if (e.keyCode == 13)
    {
        document.getElementById('btnSearch').click();
        return false;
    }
    return true;
}
</script>

Machen Sie die Schaltfläche zu einem Submit-Element, damit dies automatisch erfolgt.

<input type = "submit"
       id = "btnSearch"
       value = "Search"
       onclick = "return doSomething();"
/>

Beachten Sie, dass Sie ein <form> -Element benötigen, das die Eingabefelder enthält, damit dies funktioniert (danke Sergey Ilinsky).

Es ist keine gute Praxis, das Standardverhalten neu zu definieren Enter Der Schlüssel sollte immer die Senden-Schaltfläche in einem Formular aufrufen.

Da noch niemand addEventListener verwendet hat, ist hier meine Version. Angesichts der Elemente:

<input type = "text" id = "txt" />
<input type = "button" id = "go" />

Ich würde folgendes verwenden:

var go = document.getElementById("go");
var txt = document.getElementById("txt");

txt.addEventListener("keypress", function(event) {
    event.preventDefault();
    if (event.keyCode == 13)
        go.click();
});

Auf diese Weise können Sie den Ereignistyp und die Aktion separat ändern, während der HTML-Code sauber bleibt.

Anmerkung dass es sich wahrscheinlich lohnt, sicherzustellen, dass dies außerhalb eines <form> liegt, da, als ich diese Elemente darin einfügte, die Eingabetaste gedrückt wurde, das Formular gesendet und die Seite neu geladen wurde. Ich musste ein paar Mal blinzeln, um es herauszufinden.

Nachtrag: Dank eines Kommentars von @ruffin habe ich den fehlenden Ereignishandler und ein preventDefault hinzugefügt, damit dieser Code (vermutlich) auch in einem Formular funktioniert. (Ich werde versuchen, dies zu testen. An diesem Punkt werde ich den in Klammern gesetzten Inhalt entfernen.)

In einfachem JavaScript

if (document.layers) {
  document.captureEvents(Event.KEYDOWN);
}

document.onkeydown = function (evt) {
  var keyCode = evt ? (evt.which ? evt.which : evt.keyCode) : event.keyCode;
  if (keyCode == 13) {
    // For Enter.
    // Your function here.
  }
  if (keyCode == 27) {
    // For Escape.
    // Your function here.
  } else {
    return true;
  }
};

Mir ist aufgefallen, dass die Antwort nur in jQuery gegeben wird, daher habe ich überlegt, auch etwas in einfachem JavaScript zu geben.

Ein grundlegender Trick, den Sie dafür verwenden können, den ich nicht vollständig erwähnt habe. Wenn Sie eine Ajax-Aktion oder eine andere Arbeit an der Eingabetaste ausführen möchten, aber kein Formular senden möchten, können Sie dies tun:

<form onsubmit="Search();" action="javascript:void(0);">
    <input type="text" id="searchCriteria" placeholder="Search Criteria"/>
    <input type="button" onclick="Search();" value="Search" id="searchBtn"/>
</form>

Einstellungsaktion = "Javascript: void (0);" Dies ist eine Abkürzung, um das Standardverhalten im Wesentlichen zu verhindern. In diesem Fall wird eine Methode aufgerufen, unabhängig davon, ob Sie die Eingabetaste drücken oder auf die Schaltfläche klicken, und ein Ajax-Aufruf wird ausgeführt, um einige Daten zu laden.

Probieren Sie es aus:

<input type="text" id="txtSearch"/>
<input type="button" id="btnSearch" Value="Search"/>

<script>             
   window.onload = function() {
     document.getElementById('txtSearch').onkeypress = function searchKeyPress(event) {
        if (event.keyCode == 13) {
            document.getElementById('btnSearch').click();
        }
    };

    document.getElementById('btnSearch').onclick =doSomething;
}
</script>

Gehen Sie folgendermaßen vor, um bei jedem Drücken der Eingabetaste eine Suche auszulösen:

$(document).keypress(function(event) {
    var keycode = (event.keyCode ? event.keyCode : event.which);
    if (keycode == '13') {
        $('#btnSearch').click();
    }
}

onkeydown="javascript:if (event.which || event.keyCode){if ((event.which == 13) || (event.keyCode == 13)) {document.getElementById('btnSearch').click();}};"

Dies ist nur etwas, was ich aus einem etwas jüngeren Projekt habe ... Ich habe es im Internet gefunden und ich habe keine Ahnung, ob es einen besseren Weg gibt oder nicht in einfachem altem JavaScript.

Obwohl ich mir ziemlich sicher bin, dass, solange es nur ein Feld im Formular und eine Senden-Schaltfläche gibt, das Drücken der Eingabetaste das Formular senden sollte, selbst wenn es ein anderes Formular auf der Seite gibt.

Sie können dann das übermittelte Formular mit js erfassen und alle gewünschten Überprüfungen oder Rückrufe durchführen.

In Angular2:

(keyup.enter)="doSomething()"

Wenn Sie keine visuelle Rückmeldung in der Schaltfläche wünschen, empfiehlt es sich, nicht auf die Schaltfläche zu verweisen, sondern die Steuerung direkt aufzurufen.

Außerdem wird die ID nicht benötigt - eine weitere NG2-Methode zur Trennung zwischen Ansicht und Modell.

Dies ist eine Lösung für alle YUI Liebhaber da draußen:

Y.on('keydown', function() {
  if(event.keyCode == 13){
    Y.one("#id_of_button").simulate("click");
  }
}, '#id_of_textbox');

In diesem speziellen Fall hatte ich bessere Ergebnisse mit YUI zum Auslösen von DOM-Objekten, denen Schaltflächenfunktionen hinzugefügt wurden - aber dies ist eine andere Geschichte ...

Niemand hat das HTML-Attribut "accesskey" bemerkt, das seit einiger Zeit verfügbar ist.

Dies ist ein Weg ohne Javascript zu Tastenkombinationen.

Der Zugriffstaste Attribute Verknüpfungen auf MDN

Beabsichtigt, so verwendet zu werden. Das HTML-Attribut selbst reicht aus, allerdings können wir den Platzhalter oder einen anderen Indikator je nach Browser und Betriebssystem ändern. Das Skript ist ein ungetesteter Ansatz, um eine Idee zu geben. Möglicherweise möchten Sie einen Browser-Bibliotheksdetektor wie den winzigen Browser verwenden

let client = navigator.userAgent.toLowerCase();
    isLinux = client.indexOf("linux") > -1;
    isWin = client.indexOf("windows") > -1;
    isMac = client.indexOf("Apple") > -1;
    isFirefox = client.indexOf("firefox") > -1;
    isWebkit = client.indexOf("webkit") > -1;
    isOpera = client.indexOf("opera") > -1;
    input = document.getElementById('guestInput');

if(isFirefox) {
   input.setAttribute("placeholder", "Access keys: ALT+SHIFT+Z");
} else if (isWin) {
   input.setAttribute("placeholder", "Access keys: ALT+Z");
} else if (isMac) {
  input.setAttribute("placeholder", "Access keys: CTRL+ALT+Z");
} else if (isOpera) {
  input.setAttribute("placeholder", "Shortcut: SHIFT+ESCAPE->Z");
} else {'Point me to operate...'}

<input type="text" id="guestInput" accesskey="z" placeholder="Acces shortcut:"></input>

Verwenden Sie keypress und event.key === "Enter" mit modernem JS!

const textbox = document.getElementById("txtSearch");
textbox.addEventListener("keypress", function onEvent(event) {
    if (event.key === "Enter") {
        document.getElementById("btnSearch").click();
    }
});

Mozilla Docs

nterstützte Browser

In diesem Fall möchten Sie auch die Eingabetaste von Posting to Server deaktivieren und das Js-Skript ausführen.

<input type="text" id="txtSearch" onkeydown="if (event.keyCode == 13)
 {document.getElementById('btnSearch').click(); return false;}"/>
<input type="button" id="btnSearch" value="Search" onclick="doSomething();" />

Dieser onchange Versuch ist knapp, verhält sich aber in Bezug auf den Browser von vorne nach hinten (auf Safari 4.0.5 und Firefox 3.6). 3), also letztendlich würde ich es nicht empfehlen.

<input type="text" id="txtSearch" onchange="doSomething();" />
<input type="button" id="btnSearch" value="Search" onclick="doSomething();" />

event.returnValue = false

Verwenden Sie es bei der Verarbeitung des Ereignisses oder in der Funktion, die Ihr Event-Handler aufruft.

Es funktioniert mindestens im Internet Explorer und in Opera.

Für jquery mobile musste ich tun

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

Um eine völlig einfache JavaScript-Lösung hinzuzufügen, die sich mit @ icedwaters Problem bei der Formularübermittlung befasst, finden Sie hier eine vollständige Lösung mit form.

HINWEIS: Dies gilt für "moderne Browser", einschließlich IE9 +. Die IE8-Version ist nicht viel komplizierter und kann hier gelernt .

Fiddle: https://jsfiddle.net/rufwork/gm6h25th/1/

HTML

<body>
    <form>
        <input type="text" id="txt" />
        <input type="button" id="go" value="Click Me!" />
        <div id="outige"></div>
    </form>
</body>

JavaScript

// The document.addEventListener replicates $(document).ready() for
// modern browsers (including IE9+), and is slightly more robust than `onload`.
// More here: https://stackoverflow.com/a/21814964/1028230
document.addEventListener("DOMContentLoaded", function() {
    var go = document.getElementById("go"),
        txt = document.getElementById("txt"),
        outige = document.getElementById("outige");

    // Note that jQuery handles "empty" selections "for free".
    // Since we're plain JavaScripting it, we need to make sure this DOM exists first.
    if (txt && go)    {
        txt.addEventListener("keypress", function (e) {
            if (event.keyCode === 13)   {
                go.click();
                e.preventDefault(); // <<< Most important missing piece from icedwater
            }
        });

        go.addEventListener("click", function () {
            if (outige) {
                outige.innerHTML += "Clicked!<br />";
            }
        });
    }
});

document.onkeypress = function (e) {
 e = e || window.event;
 var charCode = (typeof e.which == "number") ? e.which : e.keyCode;
 if (charCode == 13) {

        // Do something here
        printResult();
    }
};

Hier sind meine zwei Cent. Ich arbeite an einer App für Windows 8 und möchte, dass die Schaltfläche ein Klickereignis registriert, wenn ich die Eingabetaste drücke. Ich mache das in JS. Ich habe ein paar Vorschläge ausprobiert, hatte aber Probleme. Das funktioniert gut.

So machen Sie es mit jQuery:

$("#txtSearch").on("keyup", function (event) {
    if (event.keyCode==13) {
        $("#btnSearch").get(0).click();
    }
});

So machen Sie es mit normalem JavaScript:

document.getElementById("txtSearch").addEventListener("keyup", function (event) {
    if (event.keyCode==13) { 
        document.getElementById("#btnSearch").click();
    }
});

In modernem, undeprecated (ohne keyCode oder onkeydown) Javascript:

<input onkeypress="if(event.key == 'Enter') {console.log('Test')}">

Für diejenigen, die Kürze und moderne Herangehensweise mögen.

input.addEventListener('keydown', (e) => {if (e.keyCode == 13) doSomething()});

dabei ist Eingabe eine Variable, die Ihr Eingabeelement enthält.

In jQuery können Sie event.which==13 verwenden. Wenn Sie ein form haben, können Sie $('#formid').submit() (mit den richtigen Ereignis-Listenern, die der Übermittlung dieses Formulars hinzugefügt wurden) verwenden.

$('#textfield').keyup(function(event){
   if(event.which==13){
       $('#submit').click();
   }
});
$('#submit').click(function(e){
   if($('#textfield').val().trim().length){
      alert("Submitted!");
   } else {
    alert("Field can not be empty!");
   }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label for="textfield">
Enter Text:</label>
<input id="textfield" type="text">
<button id="submit">
Submit
</button>