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();" />
javascript
button
onclick
onkeypress
Kdenney
quelle
quelle
Antworten:
In jQuery würde Folgendes funktionieren:
Oder in einfachem JavaScript würde Folgendes funktionieren:
quelle
keydown
Nichtkeyup
ist das bessere Ereignis zu verwenden. Wenn Sie asp.net verwenden, müssen Siereturn false
am Ende verhindern, dass asp.net das Ereignis weiterhin abfängt.keydown
ist, dass das Halten der Eingabetaste das Ereignis immer wieder auslöst. Wenn Sie an daskeyup
Ereignis anhängen , wird es erst ausgelöst, wenn der Schlüssel losgelassen wird.event.preventDefault();
vor dem Aufruf vonclick();
Funktion , während meine Seite eine Form hat , und ich habe geschaltetkeyup
mit ,keypress
da es die einzige funktionierende Handler für mich war, sowieso, vielen Dank für ordentlich Stück Code!Dann codieren Sie es einfach ein!
quelle
Ich habe das herausgefunden:
quelle
Machen Sie die Schaltfläche zu einem Übermittlungselement, damit sie automatisch erfolgt.
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.
quelle
<form>
Tags werden vom ansonsten liberalen HTML-Parser verworfen. Also muss ich Tastendrücke oder Pleite entführen. (Übrigens: Durch Drücken der Eingabetaste in SharePoint wird der Bearbeitungsmodus aus irgendeinem Grund<button type="submit" onclick="return doSomething(this)">Value</button>
arbeitet an. Der Hinweis liegt imreturn
SchlüsselwortDa noch niemand benutzt
addEventListener
hat, hier ist meine Version. Angesichts der Elemente:Ich würde folgendes verwenden:
Auf diese Weise können Sie den Ereignistyp und die Aktion separat ändern und gleichzeitig den HTML-Code sauber halten.
quelle
e.preventDefault()
, damit es mit Formularen funktioniert. Siehe meine (neue) Antwort .if (event.keyCode == 13) { event.preventDefault(); go.click();}
In einfachem JavaScript
Ich habe festgestellt, dass die Antwort nur in jQuery gegeben wird, daher habe ich mir überlegt, auch etwas in einfachem JavaScript zu geben.
quelle
evt.which ? evt.which : evt.keyCode
ist gleichevt.which || evt.keyCode
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:
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.
quelle
searchCriteria.blur();
um dieonsubmit
.Versuch es:
quelle
Verwenden Sie Folgendes, um bei jedem Drücken der Eingabetaste eine Suche auszulösen:
quelle
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.
quelle
Verwenden Sie
keypress
undevent.key === "Enter"
mit modernen JS!Mozilla Docs
Unterstützte Browser
quelle
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.
quelle
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
quelle
s
.Dies ist eine Lösung für alle YUI- Liebhaber da draußen:
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 ...
quelle
In Angular2 :
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.
quelle
In diesem Fall möchten Sie auch die Eingabetaste von Posting to Server deaktivieren und das Js-Skript ausführen.
quelle
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.
quelle
Verwenden Sie es, wenn Sie das Ereignis behandeln oder in der Funktion, die Ihr Ereignishandler aufruft.
Es funktioniert zumindest in Internet Explorer und Opera.
quelle
Für jquery mobile musste ich machen
quelle
.live
ist in jQuery 1.7 veraltet. Wird es in jQuery Mobile immer noch als OK angesehen?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 mit
form
.Geige: https://jsfiddle.net/rufwork/gm6h25th/1/
HTML
JavaScript
quelle
In modernem, nicht veraltetem (ohne
keyCode
oderonkeydown
) Javascript:quelle
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.
quelle
charCode
irgendwo anders eine von 13 hatten, schießen Sie die abprintResult()
.So geht's mit jQuery:
So machen Sie es mit normalem JavaScript:
quelle
Für diejenigen, die Kürze und modernen Ansatz mögen.
Dabei ist input eine Variable, die Ihr Eingabeelement enthält.
quelle
Für moderne JS
keyCode
ist veraltet, verwenden Siekey
stattdessenquelle
In jQuery können Sie verwenden
event.which==13
. Wenn Sie eine habenform
, können Sie diese verwenden$('#formid').submit()
(wobei die richtigen Ereignis-Listener zur Übermittlung des Formulars hinzugefügt wurden).quelle
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
quelle
Dies könnte auch helfen, eine kleine JavaScript-Funktion, die gut funktioniert:
Ich weiß, dass diese Frage gelöst ist, aber ich habe gerade etwas gefunden, das für andere hilfreich sein kann.
quelle