Mam jedno wprowadzanie tekstu i jeden przycisk (patrz poniżej). Jak użyć JavaScript, aby wywołać zdarzenie kliknięcia przycisku po Enternaciśnięciu klawisza w polu tekstowym?

Na mojej bieżącej stronie jest już inny przycisk przesyłania, więc nie mogę po prostu ustawić przycisku jako przycisku przesyłania. A ja tylko chcesz, Enterkluczem do tego konkretnego kliknij przycisk, jeśli jest naciśnięty w tym jeden z pola tekstowego, nic innego.

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

W jQuery działałyby:

$("#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>

Lub w zwykłym JavaScript, działałyby następujące czynności:

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>

Następnie po prostu wpisz to!

<input type = "text"
       id = "txtSearch" 
       onkeydown = "if (event.keyCode == 13)
                        document.getElementById('btnSearch').click()"    
/>

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

Zrozumiałem to:

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

Ustaw przycisk jako element przesyłania, aby był automatyczny.

<input type = "submit"
       id = "btnSearch"
       value = "Search"
       onclick = "return doSomething();"
/>

Zauważ, że potrzebujesz <form>elementu zawierającego pola wejściowe, aby to zadziałało (dzięki Sergey Ilinsky).

Przedefiniowanie standardowego zachowania nie jest dobrą praktyką, Enterklucz powinien zawsze wywoływać przycisk wysyłania w formularzu.

Ponieważ nikt addEventListenerjeszcze nie korzystał , oto moja wersja. Biorąc pod uwagę elementy:

<input type = "text" id = "txt" />
<input type = "button" id = "go" />

Użyłbym następujących:

var go = document.getElementById("go");
var txt = document.getElementById("txt");

txt.addEventListener("keypress", function(event) {
    event.preventDefault();
    if (event.keyCode == 13)
        go.click();
});

Pozwala to na osobną zmianę typu zdarzenia i akcji, przy jednoczesnym zachowaniu czystości HTML.

Zauważ , że prawdopodobnie warto upewnić się, że jest to poza <form>bo, ponieważ kiedy umieściłem w nich te elementy, naciśnięcie Enter przesłało formularz i ponownie załadowało stronę. Kilka mrugnięć odkryłem.

Dodatek : Dzięki komentarzowi @ruffin dodałem moduł obsługi brakujących zdarzeń oraz a, preventDefaultaby umożliwić temu kodowi (prawdopodobnie) działanie również wewnątrz formularza. (Przejdę do testowania tego, w którym momencie usunę treść w nawiasach).

W prostym 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;
  }
};

Zauważyłem, że odpowiedź jest podana tylko w jQuery, więc pomyślałem o podaniu czegoś w zwykłym JavaScript.

Jedna podstawowa sztuczka, której możesz użyć do tego, o której nie wspomniałem w pełni. Jeśli chcesz wykonać akcję ajax lub wykonać inną pracę na Enter, ale nie chcesz przesyłać formularza, możesz to zrobić:

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

Ustawienie akcji = "javascript: void (0);" taki skrót to zasadniczo zapobieganie domyślnemu zachowaniu. W tym przypadku wywoływana jest metoda bez względu na to, czy naciśniesz klawisz Enter, czy klikniesz przycisk, a następnie zostanie wykonane wywołanie ajax w celu załadowania niektórych danych.

Spróbuj:

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

Aby uruchomić wyszukiwanie przy każdym naciśnięciu klawisza Enter, użyj:

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

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

To tylko coś, co mam z nieco niedawnego projektu ... Znalazłem to w sieci i nie mam pojęcia, czy jest lepszy sposób, czy nie w zwykłym starym JavaScript.

Używaj keypressi event.key === "Enter"z nowoczesnym JS!

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

Dokumenty Mozilla

Obsługiwane przeglądarki

Chociaż jestem całkiem pewien, że tak długo, jak w formularzu jest tylko jedno pole i jeden przycisk przesyłania, naciśnięcie Enter powinno przesłać formularz, nawet jeśli na stronie jest inny formularz.

Następnie możesz przechwycić formularz onsubmit za pomocą js i wykonać dowolną walidację lub wywołania zwrotne, jakie chcesz.

Nikt nie zauważył html attibute „klucz dostępu”, który jest dostępny od dłuższego czasu.

Jest to sposób na javascript do skrótów klawiaturowych.

Klucz dostępu przypisuje skróty do MDN

Przeznaczony do użycia w ten sposób. Sam atrybut html wystarczy, jednak możemy zmienić symbol zastępczy lub inny wskaźnik w zależności od przeglądarki i systemu operacyjnego. Skrypt jest niesprawdzonym podejściem od podstaw, aby dać pomysł. Możesz użyć detektora biblioteki przeglądarki, takiego jak mały 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", "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>

To rozwiązanie dla wszystkich miłośników YUI :

Y.on('keydown', function() {
  if(event.keyCode == 13){
    Y.one("#id_of_button").simulate("click");
  }
}, '#id_of_textbox');

W tym szczególnym przypadku miałem lepsze wyniki przy użyciu YUI do wyzwalania obiektów DOM, które zostały wstrzyknięte z funkcją przycisku - ale to inna historia ...

W Angular2 :

(keyup.enter)="doSomething()"

Jeśli nie chcesz wizualnego sprzężenia zwrotnego w przycisku, dobrym pomysłem jest nie odwoływać się do przycisku, a raczej bezpośrednio wywoływać kontroler.

Identyfikator nie jest również potrzebny - inny sposób na rozdzielenie widoku i modelu w NG2.

W tym przypadku chcesz również wyłączyć przycisk Enter z Księgowania na serwer i wykonać skrypt Js.

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

Ten onchange próba jest blisko, ale niegrzeczne w stosunku do przeglądarki, a następnie z powrotem do przodu (na Safari 4.0.5 i Firefox 3.6.3), więc ostatecznie nie polecam go.

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

event.returnValue = false

Użyj go podczas obsługi zdarzenia lub w funkcji wywoływanej przez moduł obsługi zdarzeń.

Działa przynajmniej w Internet Explorerze i Operze.

Na jquery mobile musiałem to zrobić

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

Aby dodać całkowicie proste rozwiązanie JavaScript, które rozwiązało problem @ icedwater ze złożeniem formularza , oto kompletne rozwiązanie zform .

UWAGA: Dotyczy to „nowoczesnych przeglądarek”, w tym IE9 +. Wersja IE8 nie jest dużo bardziej skomplikowana i można się jej tutaj nauczyć .

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

W nowoczesnym, nieaktualnym (bez keyCodelub onkeydown) JavaScript:

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

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

Oto moje dwa centy. Pracuję nad aplikacją dla systemu Windows 8 i chcę, aby przycisk zarejestrował zdarzenie kliknięcia po naciśnięciu przycisku Enter. Robię to w JS. Wypróbowałem kilka sugestii, ale miałem problemy. To działa dobrze.

Aby to zrobić za pomocą jQuery:

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

Aby to zrobić za pomocą normalnego JavaScript:

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

Dla tych, którzy mogą lubić zwięzłość i nowoczesne podejście js.

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

gdzie input jest zmienną zawierającą twój element wejściowy.

W jQuery możesz użyć event.which==13. Jeśli masz form, możesz użyć $('#formid').submit()(z poprawnymi detektorami zdarzeń dodanymi do przesłanego formularza).

$('#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>

Opracowałem niestandardowy język JavaScript, aby osiągnąć tę funkcję, po prostu dodając klasę

Przykład: <button type="button" class="ctrl-p">Custom Print</button>

Tutaj Sprawdź to Fiddle
- lub -
sprawdź działający przykład https://stackoverflow.com/a/58010042/6631280

Uwaga: na bieżącej logice musisz nacisnąć Ctrl+ Enter

W nowoczesnym JS keyUpjest przestarzałe, użyj keyzamiast niego

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

Może to również pomóc, mała funkcja JavaScript, która działa dobrze:

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

Wiem, że to pytanie zostało rozwiązane, ale właśnie znalazłem coś, co może być pomocne dla innych.