Trigger auf eine Schaltfläche klicken Sie JavaScript auf der Enter-Taste in einem Textfeld

Question

Ich habe eine Texteingabe und eine Taste (siehe unten). Wie kann ich JavaScript auf löst die Klick-Ereignis der Schaltfläche , wenn das Enter -Taste in dem Textfeld gedrückt wird?

Es gibt bereits eine andere Taste auf meiner aktuellen Seite einreichen, so kann ich nicht einfach die Taste machen eine Absenden-Button. Und, I nur will die Enter Taste, um diese bestimmte Schaltfläche klicken, wenn sie aus diesem Textfeld gedrückt wird, nichts anderes.

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

Answer 1

In jQuery, folgenden funktionieren würde:

$("#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 im Klar JavaScript, würde folgende Arbeiten:

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>

Answer 2

Dann kodieren sie nur an!

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

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

Answer 3

Figured this out:

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

Answer 4

Machen Sie die Taste ein Element einreichen, so dass es automatisch sein werden.

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

Beachten Sie, dass Sie ein <form> Element benötigen die Eingabefelder enthält, diese Arbeit zu machen (dank Sergey Ilinsky).

Es ist keine gute Praxis Standardverhalten neu zu definieren, die Enter -Taste sollte immer die Schaltfläche auf einem Formular aufrufen.

Answer 5

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

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

Ich würde verwenden Sie die folgende:

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 Aktion ändern getrennt, während die HTML sauber zu halten.

  

Hinweis , dass es wahrscheinlich lohnt, sicher außerhalb eines <form> dies zu machen, denn wenn ich eingeschlossen, diese Elemente in ihnen das Formular abgeschickt Drücken der Eingabetaste und nachgeladen die Seite. Hat mich ein paar blinkt zu entdecken.

     

    

Nachtrag : Dank eines Kommentars durch @ruffin habe ich die fehlenden Event-Handler und ein preventDefault hinzugefügt diesen Code zu ermöglichen (vermutlich) als auch in einer Form arbeiten. (Ich werde kommen, um dies zu testen, an welcher Stelle ich den klammert Inhalt entfernen.)

  

Answer 6

Im Klar 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;
  }
};

bemerkte ich, dass die Antwort in jQuery nur gegeben ist, so dachte ich auch etwas in einfachen JavaScript geben.

Answer 7

Ein grundlegender Trick, den Sie für diese verwenden können, die mich noch nicht vollständig erwähnt gesehen. Wenn Sie möchten, auf Geben Sie eine Ajax-Aktion oder eine andere Arbeit zu tun, aber nicht will, um tatsächlich ein Formular einreichen, dies zu 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);" wie dies ist eine Verknüpfung im Wesentlichen Standardverhalten zu verhindern. In diesem Fall wird ein Verfahren bezeichnet, ob Sie drücken Sie die Eingabetaste oder klicken Sie auf die Schaltfläche wird und ein Ajax-Aufruf gemacht, einige Daten zu laden.

Answer 8

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

Answer 9

eine Suche auszulösen jedes Mal die Enter-Taste gedrückt wird, verwenden Sie diese:

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

Answer 10

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

Dies ist nur etwas, was ich von einem etwas neuen Projekt habe ... Ich finde es auf dem Netz, und ich habe keine Ahnung, ob es eine bessere Art und Weise oder nicht in plain old JavaScript.

Answer 11

Obwohl, ich bin mir ziemlich sicher, dass, solange es nur ein Feld in der Form ist und eine Absenden-Button, geben Sie schlagen sollte das Formular abzuschicken, selbst wenn es eine andere Form auf der Seite.

Sie können dann fangen die Form onsubmit mit js und tun, was die Validierung oder Rückrufe Sie wollen.

Answer 12

Dies ist eine Lösung für alle YUI Liebhaber gibt:

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

In diesem speziellen Fall habe ich bessere Ergebnisse für die Auslösung DOM-Objekte unter Verwendung von YUI, die mit Button-Funktionalität injiziert wurden - aber das ist eine andere Geschichte ...

Answer 13

Angular2 :

(keyup.enter)="doSomething()"

Wenn Sie nicht etwas visuelles Feedback in die Schaltfläche wollen, ist es ein gutes Design nicht auf die Schaltfläche Referenz, sondern direkt den Controller aufzurufen.

Auch wird die ID nicht benötigt -. Ein anderen NG2 Weg zwischen der Ansicht und dem Modell der Trennung

Answer 14

Niemand bemerkte die html attibute "accesskey", die seit einiger Zeit verfügbar ist.

Dies ist ein kein Javascript Weg, um Tastenkombinationen stopfen.

ACCESSKEY Attribute Verknüpfungen auf MDN

intented wie folgt verwendet werden. Das HTML-Attribut selbst ist genug, howewer wir den Platzhalter oder eine andere Anzeige ändern können je nach Browser und Betriebssystem. Das Skript ist ein nicht getestete Kratz Ansatz einer Idee zu geben. Sie können einen Browser Bibliothek Detektor wie dem kleinen bowser

verwenden möchten

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>

Answer 15

Verwenden keypress und 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

Answer 16

Das Onchange Versuch ist in der Nähe, aber misbehaves in Bezug auf Browser vorwärts damals (auf Safari 4.0.5 und Firefox 3.6.3), so letztlich, ich würde es nicht empfehlen.

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

Answer 17

Diese in-Fall, dass Sie auch die Enter-Taste deaktivieren, um Server zu veröffentlichen und den Js-Skript auszufü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();" />

Answer 18

event.returnValue = false

Verwenden Sie es, wenn das Ereignis oder in der Funktion Ereignishandler ruft Handhabung.

Es funktioniert in Internet Explorer und Opera zumindest.

Answer 19

Für jQuery Mobile ich tun musste,

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

Answer 20

erzeugt eine einfache JavaScript-Lösung hinzuzufügen, die @ icedwater das Problem mit Formulareinreichung angesprochen, hier ist eine komplette Lösung mit form .

  

Hinweis: Dies ist für "modernen Browser", darunter IE9 +. Die IE8-Version ist nicht viel komplizierter und kann werden hier gelernt haben.

---

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

Answer 21

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

Heres meine zwei Cent. Ich arbeite an einer App für Windows 8 und wollen, dass die Schaltfläche ein Click-Ereignis zu registrieren, wenn ich die Taste drücken Sie die Eingabetaste. Ich tue dies in JS. Ich habe versucht, ein paar Vorschläge, aber hatten Probleme. Das funktioniert ganz gut.

Answer 22

Um es zu tun mit jQuery:

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

Um es mit normalen JavaScript zu tun:

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

Answer 23

In der modernen, undeprecated (ohne keyCode oder onkeydown) Javascript:

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

Answer 24

Für diejenigen, die Kürze und moderne js Ansatz mögen können.

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

Dabei steht Eingang ist eine Variable Ihr Eingangselement enthält.

Answer 25

In jQuery, können Sie event.which==13 verwenden. Wenn Sie eine form haben, könnten Sie $('#formid').submit() (mit den richtigen Event-Listener hinzugefügt, um die Unterwerfung der Form) verwendet werden.

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

Answer 26

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ß, diese Frage ist gelöst, aber ich habe gerade etwas, was für andere hilfreich sein kann.