it-swarm.com.de

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

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

Auf meiner aktuellen Seite befindet sich bereits eine andere Senden-Schaltfläche, sodass ich die Schaltfläche nicht einfach zu einer Senden-Schaltfläche machen kann. Und ich will nur die Enter Taste, um auf diese bestimmte Schaltfläche zu klicken, wenn sie in diesem Textfeld gedrückt wird, sonst nichts.

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

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>
1376
Steve Paulo

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();"
/>
383
Sergey Ilinsky

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

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.

79
albertein

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

73
icedwater

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.

58
Varun

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.

21
Switters

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

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

13
Max Schmeling

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.

12
garrow

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.

11

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

11
frhd

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

Dies ist ein Weg ohne Javascript zu Tastenkombinationen.

accesskey_browsers

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

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

10
Gibolt

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();" />
9
njoshsn

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();" />
9
Luke Nezda
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.

8
ELEK

Für jquery mobile musste ich tun

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

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

5
Tequilaman

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

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

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

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.

3

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