Lösen Sie mit JavaScript einen Schaltflächenklick auf die Eingabetaste in einem Textfeld aus

1292

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();" />
Kdenney
quelle
1
Wichtiger Hinweis für Anfänger wie mich: Der wichtigste Teil dieser Frage ist, wenn Sie bereits ein Formular auf der Seite haben und daher bereits eine Schaltfläche zum Senden haben. Die jQuery-Antwort ist browserübergreifend kompatibel und eine gute Lösung.
Joshua Dance
2
@JoshuaDance, bereits ein Formular / Senden zu haben, ist kein Problem. Eine Seite kann viele Formulare haben (aber nicht verschachtelt), von denen jedes seine eigene Übermittlung hat. Jedes Feld jedes Formulars löst nur das Senden dieses Formulars aus. Wie in dieser Antwort angegeben .
Frédéric

Antworten:

1426

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>

Steve Paulo
quelle
12
Es ist wahrscheinlich eine bessere Praxis, event.which als event.keyCode oder event.charCode abzufragen, siehe developer.mozilla.org/en/DOM/event.charCode#Notes
William Niu
25
keydownNicht keyupist das bessere Ereignis zu verwenden. Wenn Sie asp.net verwenden, müssen Sie return falseam Ende verhindern, dass asp.net das Ereignis weiterhin abfängt.
maxp
144
Das Problem bei der Verwendung keydownist, dass das Halten der Eingabetaste das Ereignis immer wieder auslöst. Wenn Sie an das keyupEreignis anhängen , wird es erst ausgelöst, wenn der Schlüssel losgelassen wird.
Steve Paulo
26
Ich habe das Hinzufügen Code gezwickt event.preventDefault();vor dem Aufruf von click();Funktion , während meine Seite eine Form hat , und ich habe geschaltet keyupmit , keypressda es die einzige funktionierende Handler für mich war, sowieso, vielen Dank für ordentlich Stück Code!
Adrian K.
7
Um fair zu sein, war jQuery ziemlich gleichbedeutend mit JS, als diese Antwort veröffentlicht wurde. Aber jetzt sind viele von uns, die jQuery ganz vermeiden (weil es nur eine Verschwendung von KB ist, wenn Sie so etwas wie React verwenden), verärgert, wenn wir nach Antworten auf JS-Fragen suchen, und oft ist das erste, was auftaucht, eine Bibliothek, die wir anziehen Ich will mich nicht darauf verlassen.
Andy
402

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();"
/>
Sergey Ilinsky
quelle
5
Ja, das hätte ich fast getan. Ich denke, es ist nur eine persönliche Präferenzsache ... Ich mag den modulareren Ansatz. ;)
Kdenney
9
Wenn Sie die Formularübermittlung stoppen müssen: onkeydown = "if (event.keyCode == 13) {document.getElementById ('btnSubmit'). click (); event.returnValue = false; event.cancel = true;}"
Gabriel Chung
3
Dies funktionierte für mich aufgrund der Tatsache, dass Sie mit der Inline-Methode anstelle eines Aufrufs einer Funktion mit ähnlichem Code beim Aufruf false zurückgeben und ein Postback vermeiden können. In meinem Fall ruft die "click" -Methode einen asynchronen __doPostback-Aufruf ohne "return false" auf. würde nur die Seite neu laden.
Dave
3
Ich stimme Sam zu, dieser Code mit diesem Inline-JS-Code ist höllisch hässlich. Sie sollten HTML- und JavaScript-Codes immer trennen.
Sk8erPeter
9
@ Sam Bekomme niemals deine Weisheit von Puppen . Schmerz führt zu Angst und Angst ist der Geisteskiller. Angst ist der kleine Tod, der völlige Auslöschung bringt. Ich werde meiner Angst ins Auge blicken. Ich werde zulassen, dass es über mich und durch mich geht. Und wenn es vorbei ist, werde ich das innere Auge drehen, um seinen Weg zu sehen. Wo die Angst hingegangen ist, wird nichts sein. Außer vielleicht Inline-Event-Handlern. Also, ja, bitte trennen Sie Ihre Event-Handler von Ihrer Ansicht / Ihrem Markup, wie dies bei dieser Antwort der Fall ist . ; ^)
Ruffin
179

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>
Kdenney
quelle
22
e = e || window.event; // kürzester Weg zum Event
Victor
2
Beste einfache JavaScript-Option. Das Hinzufügen von JavaScript als Attribut in HTML ist platzraubend und jQuery ist nur jQuery (Kompatibilität ist nicht garantiert). Danke für die Lösung!
Boxspah
und wenn Sie innerhalb des if false zurückgeben, können Sie verhindern, dass der Schlüssel weiter verarbeitet wird: <input type = "text" id = "txtSearch" onkeypress = "searchKeyPress (event);" /> <input type = "button" id = "btnSearch" Value = "Search" onclick = "doSomething ();" /> <script> -Funktion searchKeyPress (e) {// nach window.event suchen, falls das Ereignis in e = e || nicht übergeben wird window.event; if (e.keyCode == 13) {document.getElementById ('btnSearch'). click (); falsch zurückgeben; } return true; } </ script>
Jose Gómez
83

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.

Albertein
quelle
30
Kerle! Lesen Sie seine gesamte Frage. Es gibt bereits einen weiteren Senden-Button auf der Seite, sodass dies für ihn nicht funktionieren würde.
Skybondsor
5
Unterhaltsame Tatsache, ich habe kürzlich versucht, dies in SharePoint zu tun. SharePoint verfügt jedoch bereits über ein Formular, das alle Ihre Inhalte umschließt, und alle <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
1
A <button type="submit" onclick="return doSomething(this)">Value</button>arbeitet an. Der Hinweis liegt im returnSchlüsselwort
Gus
77

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

Eiswasser
quelle
14
Ich verstehe wirklich nicht, warum die JQeuery-Antwort mehr positive Stimmen hat. Ich weine für die Webentwicklungs-Community.
David
1
Alles, was Sie wirklich vermissen, ist ein Argument in Ihrem Tastendruck-Handler und ein Argument e.preventDefault(), damit es mit Formularen funktioniert. Siehe meine (neue) Antwort .
Ruffin
5
Wenn Sie nicht beabsichtigen, dass Ihre Benutzer tatsächlich Daten eingeben, sollten Sie wirklich so etwas tunif (event.keyCode == 13) { event.preventDefault(); go.click();}
unsynchronisiert am
1
Die Verwendung von jQuery nur für dieses kleine Ding ist sicher nutzlos. Es funktioniert auch sehr einfach mit CSP und benötigt weniger Zeit zum Laden. Wenn Sie können, verwenden Sie dies.
Avamander
59

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.

Varun
quelle
20
document.layers? Unterstützen Sie immer noch Netscape? !!
Victor
6
Nein, Sie müssen Netscape nicht unterstützen. blog.netscape.com/2007/12/28/…
kingdango
7
netscape.com existiert nicht einmal mehr (es leitet zu aol.com weiter) und dennoch gibt es immer noch Leute, die nescape unterstützen, erstaunlich.
LeartS
6
evt.which ? evt.which : evt.keyCodeist gleichevt.which || evt.keyCode
Benutzer
3
@LeartS würde ich , dass die Wette , weil es immer noch Menschen sind mit Netscape.
SantiBailors
23

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.

Switters
quelle
Dies ist eine bessere Lösung für die Unterstützung mobiler Geräte. Es verbirgt sich die Tastatur automatisch auf Android - Geräten und auch iOS , wenn Sie hinzufügen , searchCriteria.blur();um die onsubmit.
Aaron Gillion
Dies funktioniert nicht, da auf der Seite bereits eine weitere Schaltfläche zum Senden vorhanden ist.
Jose Gómez
@ JoseGómez, eine Seite kann so viele Senden-Schaltflächen haben, wie der Entwickler wünscht, und nur durch die entsprechenden Felder ausgelöst werden. Es sind nur unterschiedliche Formulare für jede Gruppe von Feldern / Übermittlungen erforderlich. Eine Seite ist nicht auf ein einzelnes Formular beschränkt.
Frédéric
@Frederic: Aus der Frage habe ich (falsch?) Verstanden, dass die andere Schaltfläche zum Senden dieselbe Form hat: "Auf meiner aktuellen Seite befindet sich bereits eine andere Schaltfläche zum Senden, sodass ich die Schaltfläche nicht einfach zu einer Schaltfläche zum Senden machen kann."
Jose Gómez
1
Dies ist eine großartige Antwort, da sie benutzerdefinierte Aktionen zulässt, jedoch keine ausgefallenen Überschreibungscodes erforderlich sind.
Beejor
16

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

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

Max Schmeling
quelle
14

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

Gibolt
quelle
13

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.

Garrow
quelle
13

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

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

accesskey_browsers

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>

NVRM
quelle
1
Der Zugang hat zwei s.
Kaiser
3
Scheint
12

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

frhd
quelle
12

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.

AlikElzin-Kilaka
quelle
1
Hier ist eine Frage zu weiteren Informationen zu den Keyup-Optionen: stackoverflow.com/q/32155887/435605
AlikElzin-kilaka
10

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

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();" />
beldaz
quelle
Sollte auch erwähnen, dass es bei Unschärfe auslöst.
FluorescentGreen5
8
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.

ELEK
quelle
8

Für jquery mobile musste ich machen

$('#id_of_textbox').live("keyup", function(event) {
    if(event.keyCode == '13'){
    $('#id_of_button').click();
    }
});
user1071182
quelle
2
.liveist in jQuery 1.7 veraltet. Wird es in jQuery Mobile immer noch als OK angesehen?
Barmar
8

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 />";
            }
        });
    }
});
Ruffin
quelle
1
Abstimmungen ohne Erklärungen machen es schwierig, auf Ihre Bedenken einzugehen. Lassen Sie mich wissen, was nicht richtig erscheint, und ich würde gerne nachverfolgen.
Ruffin
7

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

<input onkeypress="if(event.key == 'Enter') {console.log('Test')}">
MCCCS
quelle
Dies ist meiner Meinung nach die einfachste Antwort, die den Job macht. In meinem Anwendungsfall habe ich es auf onkeypress = "inputKeyPressed (event)" aktualisiert und dann den Parameter event.which in der Funktion selbst behandelt. Die Eingabetaste gibt beispielsweise das Ereignis zurück, das als 13.
ak93
5
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.

Tequilaman
quelle
Eine Art Overkill, um den Ereignishandler im Dokument zu platzieren. Wenn Sie charCodeirgendwo anders eine von 13 hatten, schießen Sie die ab printResult().
Ruffin
5

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

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.

Alexandr Tsyganok
quelle
1

Für moderne JS keyCodeist veraltet, verwenden Sie keystattdessen

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

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>

hev1
quelle
0

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

Ravi Makwana
quelle
-4

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.

Niraj Chauhan
quelle
5
Die Frage war, einen Schaltflächenklick mit der Eingabetaste in einem Textfeld auszulösen. Ihre Lösung ist für eine "Wasserzeichen" -Funktionalität.
Kdenney