Ich habe eine Texteingabe und eine Schaltfläche (siehe unten). Wie kann ich JavaScript verwenden, um das Klickereignis der Schaltfläche auszulösen, wenn die EnterTaste im Textfeld gedrückt wird?

Auf meiner aktuellen Seite befindet sich bereits eine andere Schaltfläche zum Senden. Daher kann ich die Schaltfläche nicht einfach zu einer Schaltfläche zum Senden machen. Und ich möchte nur, dass die EnterTaste auf diese bestimmte Schaltfläche klickt, wenn sie in diesem einen Textfeld gedrückt wird, sonst nichts.

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

In jQuery würde Folgendes funktionieren:

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

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

$("#myButton").click(function() {
  alert("Button code executed.");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Username:<input id="username" type="text"><br>
Password:&nbsp;<input id="pw" type="password"><br>
<button id="myButton">Submit</button>

Oder in einfachem JavaScript würde Folgendes funktionieren:

document.getElementById("id_of_textbox")
    .addEventListener("keyup", function(event) {
    event.preventDefault();
    if (event.keyCode === 13) {
        document.getElementById("id_of_button").click();
    }
});

document.getElementById("pw")
    .addEventListener("keyup", function(event) {
    event.preventDefault();
    if (event.keyCode === 13) {
        document.getElementById("myButton").click();
    }
});

function buttonCode()
{
  alert("Button code executed.");
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Username:<input id="username" type="text"><br>
Password:&nbsp;<input id="pw" type="password"><br>
<button id="myButton" onclick="buttonCode()">Submit</button>

Dann codieren Sie 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();"
/>

Ich habe das herausgefunden:

<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 Übermittlungselement, damit sie automatisch erfolgt.

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

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

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

Da noch niemand benutzt addEventListenerhat, hier ist 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 und gleichzeitig den HTML-Code sauber halten.

Beachten Sie, dass es sich wahrscheinlich lohnt, sicherzustellen, dass dies außerhalb von a liegt, <form>da beim Einfügen dieser Elemente durch Drücken der Eingabetaste das Formular gesendet und die Seite neu geladen wurde. Ich brauchte ein paar Augenblicke, um es zu entdecken.

Nachtrag : Dank eines Kommentars von @ruffin habe ich den fehlenden Ereignishandler und einen hinzugefügt preventDefault, damit dieser Code (vermutlich) auch in einem Formular funktioniert. (Ich werde mich darum kümmern, dies zu testen. An diesem Punkt werde ich den Inhalt in Klammern 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;
  }
};

Ich habe festgestellt, dass die Antwort nur in jQuery gegeben wird, daher habe ich mir ü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 Enter 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>

Einstellung action = "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 es wird ein Ajax-Aufruf ausgeführt, um einige Daten zu laden.

Versuch es:

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

Verwenden Sie Folgendes, 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 neueren Projekt habe ... Ich habe es im Internet gefunden und ich habe keine Ahnung, ob es in einfachem altem JavaScript einen besseren Weg gibt oder nicht.

Verwenden Sie keypressund event.key === "Enter"mit modernen JS!

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

Mozilla Docs

Unterstützte Browser

Obwohl ich mir ziemlich sicher bin, dass das Formular durch Drücken der Eingabetaste gesendet werden sollte, solange das Formular nur ein Feld und eine Schaltfläche zum Senden enthält, auch wenn sich auf der Seite ein anderes Formular befindet.

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

Niemand hat den HTML-Attibute "Accesskey" bemerkt, der seit einiger Zeit verfügbar ist.

Dies ist eine nicht-Javascript-Methode für Tastaturkürzel.

Der Zugriffsschlüssel weist Verknüpfungen zu MDN zu

Absicht, so verwendet zu werden. Das HTML-Attribut selbst reicht aus, jedoch können wir den Platzhalter oder einen anderen Indikator je nach Browser und Betriebssystem ändern. Das Skript ist ein ungetesteter Scratch-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", "ALT+SHIFT+Z");
} else if (isWin) {
   input.setAttribute("placeholder", "ALT+Z");
} else if (isMac) {
  input.setAttribute("placeholder", "CTRL+ALT+Z");
} else if (isOpera) {
  input.setAttribute("placeholder", "SHIFT+ESCAPE->Z");
} else {'Point me to operate...'}

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

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 ...

In Angular2 :

(keyup.enter)="doSomething()"

Wenn Sie kein visuelles Feedback in der Schaltfläche wünschen, ist es ein gutes Design, nicht auf die Schaltfläche zu verweisen, sondern den Controller direkt aufzurufen.

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

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 Änderungsversuch ist naheliegend, verhält sich jedoch in Bezug auf den Browser damals (in Safari 4.0.5 und Firefox 3.6.3) schlecht, sodass ich ihn letztendlich nicht empfehlen würde.

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

event.returnValue = false

Verwenden Sie es, wenn Sie das Ereignis behandeln oder in der Funktion, die Ihr Ereignishandler aufruft.

Es funktioniert zumindest in Internet Explorer und Opera.

Für jquery mobile musste ich machen

$('#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 das Problem von @ icedwater mit der Formularübermittlung behoben hat , finden Sie hier eine vollständige Lösung mitform .

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

Geige: 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 />";
            }
        });
    }
});

In modernem, nicht veraltetem (ohne keyCodeoder onkeydown) Javascript:

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

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 geht's 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();
    }
});

Für diejenigen, die Kürze und modernen Ansatz mögen.

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

Dabei ist input eine Variable, die Ihr Eingabeelement enthält.

Für moderne JS keyCodeist veraltet, verwenden Sie keystattdessen

searchInput.onkeyup = function (e) {
    if (e.key === 'Enter') {
        searchBtn.click();
    }
}

In jQuery können Sie verwenden event.which==13. Wenn Sie eine haben form, können Sie diese verwenden $('#formid').submit()(wobei die richtigen Ereignis-Listener zur Übermittlung des Formulars hinzugefügt wurden).

$('#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>

Ich habe benutzerdefiniertes Javascript entwickelt, um diese Funktion durch Hinzufügen einer Klasse zu erreichen

Beispiel: <button type="button" class="ctrl-p">Custom Print</button>

Hier Check it out Fiddle
- oder -
check out laufendes Beispiel https://stackoverflow.com/a/58010042/6631280

Hinweis: In der aktuellen Logik müssen Sie Ctrl+ drückenEnter

Dies könnte auch helfen, eine kleine JavaScript-Funktion, die gut funktioniert:

<script type="text/javascript">
function blank(a) { if(a.value == a.defaultValue) a.value = ""; }

function unblank(a) { if(a.value == "") a.value = a.defaultValue; }
</script> 
<input type="text" value="email goes here" onfocus="blank(this)" onblur="unblank(this)" />

Ich weiß, dass diese Frage gelöst ist, aber ich habe gerade etwas gefunden, das für andere hilfreich sein kann.