Trigger klik tombol dengan JavaScript pada tombol Enter di kotak teks


1293

Saya punya satu input teks dan satu tombol (lihat di bawah). Bagaimana saya bisa menggunakan JavaScript untuk memicu acara klik tombol ketika Entertombol ditekan di dalam kotak teks?

Sudah ada tombol kirim yang berbeda di halaman saya saat ini, jadi saya tidak bisa hanya membuat tombol tombol kirim. Dan, saya hanya ingin Enterkunci untuk mengklik tombol spesifik 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();" />

1
Catatan penting untuk pemula seperti saya: Bagian utama dari pertanyaan ini adalah jika Anda sudah memiliki formulir di halaman, maka sudah memiliki tombol kirim. Jawaban jQuery kompatibel lintas peramban dan solusi yang bagus.
Joshua Dance

2
@ JoshuaDance, sudah memiliki formulir / kirim bukan masalah. Halaman dapat memiliki banyak bentuk (tetapi tidak bersarang), masing-masing memiliki pengiriman sendiri. Setiap bidang dari setiap formulir hanya akan memicu pengiriman formulir itu. Seperti yang dinyatakan oleh jawaban ini .
Frédéric

Jawaban:


1426

Di jQuery, yang berikut ini 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 biasa, yang berikut ini 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>


12
Mungkin ini adalah praktik yang lebih baik untuk menanyakan event.which daripada event.keyCode atau event.charCode, lihat developer.mozilla.org/en/DOM/event.charCode#Notes
William Niu

25
keydownbukan keyupadalah acara yang lebih baik untuk digunakan. Juga, jika Anda menggunakan asp.net, Anda harus return falsemenghentikan asp.net di akhir acara.
Maks.

144
Masalah dengan menggunakan keydownadalah bahwa menekan enter akan memunculkan event berulang-ulang. jika Anda melampirkan ke keyupacara tersebut, itu hanya akan menyala setelah kunci dilepaskan.
Steve Paulo

26
Saya sudah tweak kode Anda menambahkan event.preventDefault();sebelum memohon click();fungsi sementara halaman saya memiliki bentuk dan saya sudah beralih keyupdengan keypressseperti itu handler hanya bekerja untuk saya, lagian, terima kasih untuk sepotong rapi kode!
Adrian K.

7
Agar adil, jQuery cukup identik dengan JS kembali ketika jawaban ini diposting. Tapi sekarang banyak dari kita yang menghindari jQuery sama sekali (karena itu hanya buang-buang kb ketika Anda menggunakan sesuatu seperti React) merasa kesal ketika kita mencari jawaban untuk pertanyaan JS dan sering kali hal pertama yang muncul adalah perpustakaan yang kita tidak gunakan. tidak mau bergantung.
Andy

402

Maka cukup masukkan dalam kode!

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

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

5
Ya saya hampir melakukannya. Saya kira itu hanya hal preferensi pribadi ... Saya suka pendekatan yang lebih modular. ;)
kdenney

9
jika Anda perlu menghentikan pengiriman formulir: onkeydown = "if (event.keyCode == 13) {document.getElementById ('btnSubmit'). klik (); event.returnValue = false; event.cancel = true;}"
Gabriel Chung

3
Ini bekerja untuk saya karena fakta bahwa metode inline, alih-alih memanggil fungsi dengan kode yang sama di dalamnya, memungkinkan Anda untuk mengembalikan false pada panggilan dan menghindari postback. Dalam kasus saya, metode "klik" memanggil panggilan async __doPostback dan tanpa "return false;" hanya akan memuat ulang halaman.
Dave

3
Saya setuju dengan Sam, kode ini dengan inline JS-code ini jelek sekali. Anda harus selalu memisahkan kode HTML dan JavaScript.
Sk8erPeter

9
@ Sam Jangan pernah dapatkan kebijaksanaan Anda dari boneka . Rasa sakit menyebabkan rasa takut , dan rasa takut adalah pembunuh pikiran. Ketakutan adalah kematian kecil yang membawa pemusnahan total. Saya akan menghadapi ketakutan saya. Saya akan mengizinkannya untuk melewati saya dan melalui saya. Dan ketika telah melewati saya akan memutar mata batin untuk melihat jalannya. Di mana rasa takut telah pergi tidak akan ada apa-apa. Kecuali mungkin inline event handler. Jadi, ya, harap pisahkan penangan acara Anda dari tampilan / markup Anda, seperti jawaban ini . ; ^)
ruffin

179

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

22
e = e || window.event; // cara terpendek untuk mendapatkan acara
Victor

2
Opsi JavaScript terbaik. Menambahkan JavaScript sebagai atribut dalam HTML memakan banyak ruang, dan jQuery hanya jQuery (kompatibilitas tidak dijamin). Terima kasih atas solusinya!
boxspah

dan jika Anda mengembalikan false di dalam if, Anda dapat menghindari kunci untuk diproses lebih lanjut: <input type = "text" id = "txtSearch" onkeypress = "searchKeyPress (event);" /> <input type = "button" id = "btnSearch" Value = "Cari" onclick = "doSomething ();" /> <script> function searchKeyPress (e) {// cari window.event jika event tidak diteruskan dalam e = e || window.event; if (e.keyCode == 13) {document.getElementById ('btnSearch'). klik (); return false; } mengembalikan true; } </script>
Jose Gómez

83

Jadikan tombol sebagai elemen kirim, jadi itu akan otomatis.

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

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

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


30
Dudes! Baca seluruh pertanyaannya. Sudah ada tombol kirim lain di halaman, jadi ini tidak akan berfungsi untuknya.
skybondsor

5
Fakta menyenangkan, saya baru-baru ini mencoba melakukan ini di SharePoint. Namun SharePoint sudah memiliki formulir yang membungkus semua konten Anda, dan <form>tag apa pun dibuang oleh parser HTML yang liberal. Jadi saya harus membajak tombol atau bust. (BTW, menekan Enter di SharePoint meluncurkan mode Edit untuk beberapa alasan. Saya kira pita menggunakan bentuk yang sama.)

1
A <button type="submit" onclick="return doSomething(this)">Value</button>bekerja untuk. Petunjuknya terletak dalam returnkata kunci
Gus

77

Karena belum ada yang menggunakan addEventListener, ini versi saya. Mengingat unsur-unsurnya:

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

Saya akan menggunakan yang berikut ini:

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 acara dan tindakan secara terpisah sambil menjaga HTML tetap bersih.

Perhatikan bahwa mungkin bermanfaat untuk memastikan ini di luar <form>karena ketika saya menyertakan elemen-elemen ini di dalamnya menekan Enter mengirimkan formulir dan memuat kembali halaman. Butuh beberapa kedipan untuk kutemukan.

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


14
Saya benar-benar tidak mengerti mengapa jawaban JQeuery memiliki lebih banyak suara positif. Saya menangis untuk komunitas pengembangan web.
David

1
Yang Anda benar-benar hilang adalah argumen dalam penangan tombol ditekan dan e.preventDefault()untuk membuatnya bekerja dengan formulir. Lihat jawaban (baru) saya .
ruffin

5
kecuali jika Anda tidak bermaksud pengguna Anda untuk benar-benar memasukkan data apa pun, Anda harus benar-benar melakukan sesuatu sepertiif (event.keyCode == 13) { event.preventDefault(); go.click();}
tidak disinkronkan

1
Menggunakan jQuery hanya untuk hal kecil ini pasti tidak berguna. Ini juga bekerja lebih mudah dengan CSP dan membutuhkan waktu lebih sedikit untuk memuat. Jika Anda bisa, gunakan ini.
Avamander

59

Dalam JavaScript biasa,

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 diberikan hanya di jQuery, jadi saya berpikir untuk memberikan sesuatu dalam JavaScript juga.


20
document.layers? Apakah Anda masih mendukung Netscape? !!
Victor

6
Tidak, Anda tidak perlu mendukung Netscape. blog.netscape.com/2007/12/28/…
kingdango

7
netscape.com bahkan tidak ada lagi (itu dialihkan ke aol.com) dan masih ada orang yang mendukung nescape, luar biasa.
LeartS

6
evt.which ? evt.which : evt.keyCodesama denganevt.which || evt.keyCode
pengguna

3
@LeartS Saya berani bertaruh itu karena masih ada orang yang menggunakan Netscape.
SantiBailors

23

Satu trik dasar yang dapat Anda gunakan untuk ini yang belum saya lihat sepenuhnya disebutkan. Jika Anda ingin melakukan tindakan ajax, atau pekerjaan lain di Enter tetapi tidak ingin mengirimkan formulir, Anda bisa 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>

Pengaturan 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 mengklik tombol dan panggilan ajax dibuat untuk memuat beberapa data.


Ini adalah solusi yang lebih baik untuk dukungan perangkat seluler. Secara otomatis menyembunyikan keyboard pada perangkat Android, dan juga iOS jika Anda menambahkan searchCriteria.blur();ke onsubmit.
Aaron Gillion

Ini tidak akan berfungsi, karena sudah ada tombol kirim lain di halaman.
Jose Gómez

@ JoseGómez, sebuah halaman dapat memiliki tombol kirim sebanyak yang diinginkan dev, dipicu oleh bidang yang sesuai saja. Hanya perlu memiliki formulir yang berbeda untuk setiap grup bidang / kirim. Halaman tidak terbatas pada satu formulir.
Frédéric

@Frederic: dari pertanyaan I (mis?) Saya mengerti bahwa tombol kirim yang lain dalam bentuk yang sama: "Sudah ada tombol kirim yang berbeda di halaman saya saat ini, jadi saya tidak bisa begitu saja membuat tombol itu sebagai tombol kirim."
Jose Gómez

1
Ini adalah jawaban yang bagus karena memungkinkan tindakan kustom namun menghindari kebutuhan untuk sekelompok kode override mewah.
Beejor

16

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>

15

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

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


14

Gunakan keypressdan event.key === "Enter"dengan JS modern!

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

Mozilla Docs

Browser yang Didukung


13

Meskipun, saya cukup yakin bahwa selama hanya ada satu bidang dalam formulir dan satu tombol kirim, menekan enter harus mengirimkan formulir, bahkan jika ada formulir lain di halaman.

Anda kemudian dapat menangkap form onsubmit dengan js dan melakukan validasi atau panggilan balik apa pun yang Anda inginkan.


13

Tidak ada yang memperhatikan html attibute "accesskey" yang tersedia sejak beberapa saat.

Ini bukan cara javascript untuk barang pintasan keyboard.

accesskey_browsers

Accesskey menghubungkan pintasan di MDN

Dimaksudkan untuk digunakan seperti ini. Atribut html itu sendiri sudah cukup, bagaimana kita bisa mengganti placeholder atau indikator lain tergantung dari browser dan os. Script adalah pendekatan awal yang belum teruji untuk memberikan ide. Anda mungkin ingin menggunakan pendeteksi pustaka browser seperti bowser kecil

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>


1
Akses memiliki dua s.
kaiser

3
Tampaknya tidak menjawab pertanyaan OP di sekitar kasus khusus key = ENTER
Ozan Bellik

12

Ini adalah solusi untuk semua pecinta YUI di luar sana:

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

Dalam kasus khusus ini saya memang memiliki hasil yang lebih baik menggunakan YUI untuk memicu objek DOM yang telah disuntikkan dengan fungsi tombol - tapi ini adalah cerita lain ...


12

Di Angular2 :

(keyup.enter)="doSomething()"

Jika Anda tidak ingin umpan balik visual pada tombol, itu adalah desain yang baik untuk tidak merujuk tombol tetapi langsung memanggil controller.

Selain itu, id tidak diperlukan - cara NG2 lain untuk memisahkan antara tampilan dan model.


1
Berikut pertanyaan tentang info lebih lanjut tentang opsi-opsi
keyup

10

Dalam hal ini Anda ingin juga mengaktifkan tombol enter dari Posting ke server dan menjalankan skrip 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();" />

9

Upaya pertukaran ini sudah dekat, tetapi perilaku buruk sehubungan dengan browser saat itu (pada Safari 4.0.5 dan Firefox 3.6.3), jadi pada akhirnya, saya tidak akan merekomendasikannya.

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

Harus juga menyebutkan bahwa itu memicu tidak fokus.
FluorescentGreen5

8
event.returnValue = false

Gunakan saat menangani acara atau dalam fungsi yang dipanggil oleh pawang acara Anda.

Paling tidak berfungsi di Internet Explorer dan Opera.


8

Untuk ponsel jquery harus saya lakukan

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

2
.livetidak digunakan dalam jQuery 1.7. Apakah masih dianggap OK di jQuery Mobile?
Barmar

8

Untuk menambahkan solusi JavaScript benar-benar polos yang ditujukan @ masalah icedwater dengan pengiriman formulir , inilah solusi lengkap denganform .

CATATAN: Ini untuk "browser modern", termasuk IE9 +. Versi IE8 tidak jauh lebih rumit, dan dapat dipelajari di sini .


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

1
Downvotes tanpa penjelasan membuat sulit untuk mengatasi masalah Anda. Beri tahu saya apa yang tampaknya tidak beres, dan saya akan senang untuk menindaklanjutinya.
ruffin

7

Dalam Javascript modern, tidak patut (tanpa keyCodeatau onkeydown):

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

Ini menurut saya jawaban paling sederhana yang berhasil. Dalam kasus penggunaan saya, saya memutakhirkannya ke onkeypress = "inputKeyPressed (event)" dan kemudian menangani parameter event.which dalam fungsi itu sendiri. Enter key misalnya mengembalikan event.which sebagai 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();
    }
};

Inilah dua sen saya. Saya sedang mengerjakan aplikasi untuk Windows 8 dan ingin tombol untuk mendaftarkan acara klik ketika saya menekan tombol Enter. Saya melakukan ini di JS. Saya mencoba beberapa saran, tetapi ada masalah. Ini berfungsi dengan baik.


Semacam berlebihan untuk menempatkan pengendali acara pada dokumen. Jika Anda memiliki charCode13 di tempat lain, Anda melepaskan printResult().
ruffin

5

Untuk melakukannya dengan jQuery:

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

Untuk melakukannya dengan JavaScript normal:

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

5

Bagi mereka yang mungkin suka singkat dan pendekatan modern js.

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

di mana input adalah variabel yang mengandung elemen input Anda.


1

Untuk JS modern keyCodesudah usang, gunakan keysaja

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

0

Di jQuery, Anda bisa menggunakan event.which==13. Jika Anda memiliki form, Anda dapat menggunakan $('#formid').submit()(dengan acara yang benar pendengar ditambahkan ke penyerahan formulir tersebut).

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


0

Saya telah mengembangkan javascript khusus untuk mencapai fitur ini dengan hanya menambahkan kelas

Contoh: <button type="button" class="ctrl-p">Custom Print</button>

Di sini, Coba Fiddle
- atau -
lihat contoh yang sedang berjalan https://stackoverflow.com/a/58010042/6631280

Catatan: pada logika saat ini, Anda perlu menekan Ctrl+ Enter


-4

Ini juga mungkin membantu, fungsi JavaScript kecil, yang berfungsi dengan baik:

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

Saya tahu pertanyaan ini sudah terpecahkan, tetapi saya baru saja menemukan sesuatu, yang dapat membantu orang lain.


5
Pertanyaannya adalah untuk memicu klik tombol dengan tombol enter di kotak teks. Solusi Anda adalah untuk jenis fungsionalitas "tanda air".
kdenney
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.