javascript - onenter - jquery keypress enter




Klicken Sie auf einen Button, klicken Sie mit JavaScript auf die Eingabetaste in einem Textfeld (16)

Verwenden Sie keypress und event.key mit modernen JS!

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

Mozilla-Dokumente

Unterstützte Browser

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 Eingabetaste innerhalb des Textfelds gedrückt wird?

Es gibt bereits eine andere Schaltfläche zum Senden auf meiner aktuellen Seite, daher kann ich die Schaltfläche nicht einfach als Absenden-Schaltfläche verwenden. Und ich möchte nur die Eingabetaste, um auf diese bestimmte Schaltfläche zu klicken, wenn sie aus diesem einen Textfeld gedrückt wird, sonst nichts.

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

Da noch niemand addEventListener verwendet addEventListener , 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 eines <form> denn wenn ich diese Elemente in sie eingeschlossen habe, drückte die Eingabetaste das Formular und lud die Seite neu. Nahm ein paarmal um zu entdecken.

Nachtrag : Dank eines Kommentars von @ruffin habe ich den fehlenden Event-Handler und einen preventDefault , damit dieser Code (vermutlich) auch in einem Formular funktioniert. (Ich werde es versuchen, um dies zu testen, an dem ich den in Klammern gesetzten Inhalt entfernen werde.)


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, die mit Button-Funktionalität injiziert wurden - aber das ist eine andere Geschichte ...


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, was für andere hilfreich sein kann.


Ein Grundtrick, den Sie dafür verwenden können, den ich nicht vollständig erwähnt habe. Wenn Sie eine Ajax-Aktion oder eine andere Arbeit bei Enter ausführen möchten, aber kein Formular senden möchten, können Sie Folgendes 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 das ist eine Abkürzung für das Verhindern von Standardverhalten im Wesentlichen. In diesem Fall wird eine Methode aufgerufen, ob Sie die Eingabetaste drücken oder auf die Schaltfläche klicken und ein Ajax-Aufruf zum Laden einiger Daten ausgeführt wird.


Für diejenigen, die Kürze und moderne js Ansatz mag.

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

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


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>

In Angular2 :

(keyup.enter)="doSomething()"

Wenn Sie keine visuelle Rückmeldung 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-Art der Trennung zwischen der Ansicht und dem Modell.


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, also dachte ich mir, auch etwas in Klartext zu geben.


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>


Niemand hat den html attibute "accesskey" bemerkt, der seit einiger Zeit verfügbar ist.

Dies ist kein JavaScript-Weg, um Tastaturkürzel zu verwenden.

Der Accesskey weist Verknüpfungen für MDN zu

Genug, um so benutzt zu werden. Das html-Attribut selbst ist ausreichend, aber wir können den Platzhalter oder andere Indikatoren je nach Browser und Betriebssystem ändern. Das Skript ist ein nicht getesteter Scratch-Ansatz, um eine Idee zu geben. Vielleicht möchten Sie einen Browser-Bibliothek-Detektor wie den kleinen bowser

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>


Obwohl ich mir ziemlich sicher bin, dass, solange es nur ein Feld im Formular und einen Submit-Button gibt, das Eingabetaste das Formular senden sollte, auch wenn ein anderes Formular auf der Seite vorhanden ist.

Sie können dann das Formular mit der Option jsubmit erfassen und die gewünschten Validierungen oder Rückrufe durchführen.


Um eine ganz einfache JavaScript-Lösung hinzuzufügen, die das Problem von @ icedwater bei der Formularübermittlung anspricht, finden Sie hier eine vollständige Lösung mit form .

HINWEIS: Dies ist 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://.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 />";
            }
        });
    }
});

Um es mit jQuery zu tun:

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

Um es mit normalem JavaScript zu machen:

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

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


event.returnValue = false

Verwenden Sie es bei der Behandlung des Ereignisses oder in der von Ihrem Ereignishandler aufgerufenen Funktion.

Es funktioniert zumindest in Internet Explorer und Opera.





onkeypress