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

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>

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

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>

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.

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

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.

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.

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>

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

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.

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

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.

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

Ini bukan cara javascript untuk barang pintasan keyboard.

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>

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

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.

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

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

event.returnValue = false

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

Paling tidak berfungsi di Internet Explorer dan Opera.

Untuk ponsel jquery harus saya lakukan

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

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

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

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

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.

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

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.

Untuk JS modern keyCodesudah usang, gunakan keysaja

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

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>

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

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.