onenter Klicken Sie auf einen Button, klicken Sie mit JavaScript auf die Eingabetaste in einem Textfeld




jquery keypress enter (20)

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

Dieser onchange Versuch ist nah dran, aber onchange sich in Bezug auf den Browser damals (auf Safari 4.0.5 und Firefox 3.6.3) falsch, also würde ich es letztendlich nicht empfehlen.

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

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>

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

Das ist nur etwas, was ich von einem etwas neuen Projekt habe ... Ich habe es im Internet gefunden, und ich habe keine Ahnung, ob es einen besseren Weg gibt oder nicht in schlichtem JavaScript.


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.


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 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 diesem Fall möchten Sie auch die Eingabetaste von "Auf Server senden" 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();" />

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

Für jquery mobile musste ich machen

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

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.


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>


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


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.


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.


Machen Sie den Button zu einem Submit-Element, damit es automatisch wird.

<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 das funktioniert (danke Sergey Ilinsky).

Es ist keine gute Übung, das Standardverhalten neu zu definieren. Die Eingabetaste sollte immer die Übergabeschaltfläche eines Formulars aufrufen.


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


Um bei jedem Drücken der Eingabetaste eine Suche auszulösen, verwenden Sie Folgendes:

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

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.


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

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






onkeypress