Jak uruchomić przycisk HTML po naciśnięciu Enter w polu tekstowym?


106

Tak więc kod, który mam do tej pory to:

<fieldset id="LinkList">
    <input type="text" id="addLinks" name="addLinks" value="http://">
    <input type="button" id="linkadd" name="linkadd" value="add">
</fieldset>

To nie jest w a <form>i jest tak, jak jest w a <div>. Jednak gdy textboxwpisuję coś w nazwie „addLinks”, chcę, aby użytkownik mógł nacisnąć klawisz Enter i uruchomić polecenie „linkadd”, buttonktóre następnie uruchomi funkcję JavaScript.
W jaki sposób mogę to zrobić?
Dzięki

Edycja: znalazłem ten kod, ale wydaje się, że nie działa.

$("#addLinks").keyup(function(event){
    if(event.keyCode == 13){
        $("#linkadd").click();
    }
});

3
powiąż z keypressi sprawdź e.charCode==13(przycisk Enter).
Brad Christie,

Czy dodałeś odniesienie do biblioteki jquery przed użyciem powyższego kodu?
Milind Anantwar

Tak, odwołałem się do biblioteki, nie jestem pewien, dlaczego nie działa, ale teraz jest w porządku. Dzięki
Ben

Tak, jak wspomniał @BradChristie keypresslub keydownwspomniał w tej odpowiedzi, są drogą do zrobienia.
metakermit

Odpowiedzi:


117
$(document).ready(function(){
    $('#TextBoxId').keypress(function(e){
      if(e.keyCode==13)
      $('#linkadd').click();
    });
});

5
dodanie „return false” po zdarzeniu kliknięcia jest również pomocne, aby uniknąć domyślnego naciśnięcia klawisza Enter na innych przyciskach na stronie
deebs

Odpowiedź dmitry_romanov jest lepsza, ponieważ jest to czysty html.
McKay

6
@ McKay, nie, nie jest. Przyciski mogą być używane do innych rzeczy niż formularze. W rzeczywistości pytanie PO wyraźnie nie ma formy.
Dan

2
@deebs ma rację, nie jestem pewien, co robiłem tego dnia, ale musiałem mieć pierdnięcie mózgiem.
Tim w MastersAllen


77

Jest …… 2020. I wierzę, że to nadal jest prawdą.


NIE UŻYWAĆ keypress

  1. keypressImpreza nie wywołał , gdy użytkownik naciśnie klawisz, który nie wywołuje żadnego znaku , takie jak Tab, Caps Lock, Delete, Backspace, Escape, w lewo i prawo Shift, klawisze funkcyjne ( F1- F12).

    keypresswydarzenie Mozilla Developer Network

    keypressZdarzenie jest zwolniony, gdy klawisz jest wciśnięty , a klucz normalnie produkuje wartość znaków . Użyj inputzamiast tego.

  2. Został wycofany.

    keypressEvent UI Events (wersja robocza W3C opublikowana 8 listopada 2018 r.)

    • UWAGA | keypressWydarzenie jest tradycyjnie związane z wykrycia wartości znaków zamiast klawisza fizycznego , a może nie być dostępna we wszystkich kluczy w niektórych konfiguracjach.
    • OSTRZEŻENIE | Typ keypresszdarzenia jest zdefiniowany w tej specyfikacji w celu odniesienia i kompletności, ale ta specyfikacja nie jest zalecana do używania tego typu zdarzenia. W kontekście edycji autorzy mogą beforeinputzamiast tego zapisać się na wydarzenie.

NIE UŻYWAĆ KeyboardEvent.keyCode

  1. Został wycofany.

    KeyboardEvent.keyCode Mozilla Developer Network

    Przestarzałe | Ta funkcja nie jest już zalecana. Chociaż niektóre przeglądarki nadal mogą go obsługiwać, mógł on już zostać usunięty z odpowiednich standardów internetowych, może być w trakcie usuwania lub może być przechowywany tylko w celu zapewnienia zgodności. Unikaj jej używania i aktualizuj istniejący kod, jeśli to możliwe; zapoznaj się z tabelą zgodności na dole tej strony, aby podjąć decyzję. Należy pamiętać, że ta funkcja może przestać działać w dowolnym momencie.


Czego mam wtedy użyć? (Dobra praktyka)

// Make sure this code gets executed after the DOM is loaded.
document.querySelector("#addLinks").addEventListener("keyup", event => {
    if(event.key !== "Enter") return; // Use `.key` instead.
    document.querySelector("#linkadd").click(); // Things you want to do.
    event.preventDefault(); // No need to `return false;`.
});

a co powiesz na if (event.key == "Enter") { document.querySelector("#linkadd").click(); } :?
Anupam

2
Pamiętaj, że .keynie jest to obsługiwane we wszystkich przeglądarkach: caniuse.com/#feat=keyboardevent-key - około 10% osób korzysta z przeglądarek, które tego nie obsługują.
Martin Tournoij

72

Istnieją rozwiązania wolne od js.

Ustaw type=submitprzycisk, który ma być domyślny, i type=buttoninne przyciski. Teraz w poniższym formularzu możesz nacisnąć Enter w dowolnych polach wejściowych, a Renderprzycisk będzie działał (mimo że jest to drugi przycisk w formularzu).

Przykład:

    <button id='close_renderer_button' class='btn btn-success'
            title='Перейти к редактированию программы'
            type=button>
      <span class='glyphicon glyphicon-edit'> </span> Edit program
    </button>
    <button id='render_button' class='btn btn-primary'
            title='Построить фрактал'
            type=submit
            formaction='javascript:alert("Bingo!");'>
      <span class='glyphicon glyphicon-send'> </span> Render
    </button>

Przetestowano w FF24 i Chrome 35 ( formactionjest funkcją HTML5 , ale typenie jest).


17
działa tylko wtedy, gdy jesteś w formularzu, OP nie używa formularza
Andrew

@Andrew Tak, przegapiłem to. Teraz widzę to wyraźnie, dziękuję.
dmitry_romanov 16.07.15

4
@ Andrew, to prawda, ale w większości przypadków jest to trywialne, aby zawinąć go w formę, w której nic nie robimy ...
Stephen Chung

2
Dodatkowo rozwiązanie to działa na klawiaturze wirtualnej iOS klawisz [Go], którego domyślną akcją jest wysłanie.
Elemental

10
  1. Wymienić buttonzsubmit
  2. Bądź postępowy , upewnij się, że masz wersję po stronie serwera
  3. Powiąż swój JavaScript z submitprogramem obsługi formularza, a nie z clickprogramem obsługi przycisku

Naciśnięcie klawisza Enter w polu spowoduje przesłanie formularza, a program obsługi przesyłania uruchomi się.


6

Możesz dodać procedurę obsługi zdarzeń do swoich danych wejściowych w następujący sposób:

document.getElementById('addLinks').onkeypress=function(e){
    if(e.keyCode==13){
        document.getElementById('linkadd').click();
    }
}

2

Działa, gdy input type = "button" zostanie zastąpiony przez input type = "submit" dla przycisku domyślnego, który należy wyzwolić.


1

Przede wszystkim dodaj plik biblioteki jquery jquery i nazwij go w swojej głowie html.

a następnie Użyj kodu opartego na jquery ...

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

1

To powinno wystarczyć, używam jQuery, możesz napisać zwykły javascript.
Zastąp sendMessage()swoją funkcjonalnością.

$('#addLinks').keypress(function(e) {
    if (e.which == 13) {
        sendMessage();
        e.preventDefault();
    }
});

1

Na podstawie kilku wcześniejszych odpowiedzi wymyśliłem to:

<form>
  <button id='but' type='submit'>do not click me</button>
  <input type='text' placeholder='press enter'>
</form>

$('#but').click(function(e) {
  alert('button press');
  e.preventDefault();
});

Spójrz na Fiddle

EDYCJA: Jeśli nie chcesz dodawać dodatkowych elementów html, możesz to zrobić tylko za pomocą JS:

    $("input").keyup(function(event) {
        if (event.keyCode === 13) {
            $("button").click();
        }
    });     

0

Znalazłem howto w3schools.com, ich strona wypróbuj mnie znajduje się poniżej.

https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_trigger_button_enter

To działało w mojej zwykłej przeglądarce, ale nie działało w mojej aplikacji php, która używa wbudowanej przeglądarki php.

Po odrobinie zabawy wymyśliłem następującą czystą alternatywę JavaScript, która działa w mojej sytuacji i powinna działać w każdej innej sytuacji:

    function checkForEnterKey(){
        if (event.keyCode === 13) {
            event.preventDefault();
            document.getElementById("myBtn").click();
        }
    }

    function buttonClickEvent()
    {
        alert('The button has been clicked!');
    }

HTML Naciśnij klawisz Enter w polu tekstowym, aby aktywować przycisk.

    <br />
    <input id="myInput" onkeyup="checkForEnterKey(this.value)">
    <br />
    <button id="myBtn" onclick="buttonClickEvent()">Button</button>

-1
<input type="text" id="input_id" />    

$('#input_id').keydown(function (event) {
    if (event.keyCode == 13) { 
         // Call your function here or add code here
    }
});

-2

Używam przycisku kendo. To zadziałało dla mnie.

<div class="form-group" id="indexform">
    <div class="col-md-8">
            <div class="row">
                <b>Search By Customer Name/ Customer Number:</b>
                @Html.TextBox("txtSearchString", null, new { style = "width:400px" , autofocus = "autofocus" })
                @(Html.Kendo().Button()
                    .Name("btnSearch")
                    .HtmlAttributes(new { type = "button", @class = "k-primary" })
                    .Content("Search")
                    .Events(ev => ev.Click("onClick")))
            </div>
    </div>
</div>
<script>
var validator = $("#indexform").kendoValidator().data("kendoValidator"),
          status = $(".status");
$("#indexform").keyup(function (event) {
    if (event.keyCode == 13) {
        $("#btnSearch").click();
    }
});
</script>
Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.