Pertanyaan Trigger a button click dengan JavaScript pada tombol Enter di kotak teks


Saya memiliki satu input teks dan satu tombol (lihat di bawah). Bagaimana saya bisa menggunakan JavaScript ke memicu acara klik tombol ketika Memasukkan kunci ditekan di dalam kotak teks?

Sudah ada tombol submit yang berbeda di halaman saya saat ini, jadi saya tidak bisa hanya membuat tombol tombol submit. Dan saya hanya menginginkan Memasukkan kunci untuk mengklik tombol khusus ini jika ditekan dari dalam kotak teks yang satu ini, tidak ada yang lain.

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

1099
2017-09-30 21:32


asal


Jawaban:


Di jQuery, hal berikut akan berfungsi:

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

Atau dalam JavaScript sederhana, hal berikut akan berfungsi:

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>


1284
2017-09-30 21:52



Kemudian, masukkan kode!

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

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

359
2017-09-30 21:56



Memikirkan ini:

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

165
2017-09-30 21:52



Buat tombol sebagai elemen kirim, jadi ini akan otomatis.

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

Perhatikan bahwa Anda akan membutuhkan <form> elemen yang berisi bidang input untuk membuat ini berfungsi (terima kasih Sergey Ilinsky).

Ini bukan praktik yang baik untuk mendefinisikan perilaku standar, yang Memasukkan kunci harus selalu memanggil tombol kirim pada formulir.


75
2017-09-30 21:33



Karena tidak ada yang menggunakannya addEventListener namun, ini adalah versi saya. Diberikan elemen:

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

Saya akan menggunakan yang berikut:

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

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

Ini memungkinkan Anda untuk mengubah jenis dan tindakan acara secara terpisah sembari menjaga agar HTML tetap bersih.

Catatan bahwa mungkin bermanfaat untuk memastikan ini di luar <form> karena ketika saya melampirkan elemen-elemen ini di dalamnya menekan Enter menyerahkan formulir dan memuat ulang halaman. Aku butuh beberapa kedipan untuk dijelajahi.

Tambahan: Terima kasih atas komentar oleh @ruffin, saya telah menambahkan event handler yang hilang dan a preventDefault untuk memungkinkan kode ini (mungkin) bekerja di dalam formulir juga. (Saya akan berkeliling untuk menguji ini, pada titik mana saya akan menghapus konten tanda kurung.)


67
2017-11-19 05:37



Di JavaScript polos,

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

Saya perhatikan bahwa balasan hanya diberikan di jQuery, jadi saya berpikir untuk memberikan sesuatu dalam JavaScript biasa juga.


55
2018-02-08 04:49



Satu trik dasar yang dapat Anda gunakan untuk ini yang belum saya lihat sepenuhnya disebutkan. Jika Anda ingin melakukan tindakan ajax, atau beberapa pekerjaan lain di Enter tetapi tidak ingin benar-benar mengirimkan formulir, Anda dapat melakukan ini:

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

Setting action = "javascript: void (0);" seperti ini adalah jalan pintas untuk mencegah perilaku default pada dasarnya. Dalam hal ini metode disebut apakah Anda menekan enter atau klik tombol dan panggilan ajax dibuat untuk memuat beberapa data.


19
2017-09-12 19:27



Cobalah:

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

13
2018-03-02 08:04



Untuk memicu pencarian setiap kali tombol enter ditekan, gunakan ini:

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

12
2017-10-27 03:35



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

Ini hanya sesuatu yang saya miliki dari proyek yang agak baru ... Saya menemukannya di internet, dan saya tidak tahu apakah ada cara yang lebih baik atau tidak dalam JavaScript lama biasa.


11
2017-09-30 21:56