Masukkan acara pers kunci dalam JavaScript

330

Saya punya formdengan dua kotak teks, satu pilih drop down dan satu tombol radio . Ketika entertombol ditekan, saya ingin memanggil fungsi Javascript (Ditentukan pengguna), tetapi ketika saya menekannya, formulir dikirimkan.

Bagaimana saya mencegah agar formtidak dikirimkan saat entertombol ditekan?

javascript forms keypress dom-events enter Shyju
sumber

Jawaban:

445 
if(characterCode == 13)
{
    return false; // returning false will prevent the event from bubbling up.
}
else
{
    return true;
}

Oke, jadi bayangkan Anda memiliki kotak teks berikut dalam formulir:

<input id="scriptBox" type="text" onkeypress="return runScript(event)" />

Untuk menjalankan beberapa skrip "yang ditentukan pengguna" dari kotak teks ini ketika tombol enter ditekan, dan belum ada yang mengirimkan formulir, berikut adalah beberapa contoh kode. Harap dicatat bahwa fungsi ini tidak melakukan pengecekan kesalahan dan kemungkinan besar hanya akan berfungsi di IE. Untuk melakukan ini dengan benar, Anda memerlukan solusi yang lebih kuat, tetapi Anda akan mendapatkan ide umum.

function runScript(e) {
    //See notes about 'which' and 'key'
    if (e.keyCode == 13) {
        var tb = document.getElementById("scriptBox");
        eval(tb.value);
        return false;
    }
}

mengembalikan nilai fungsi akan mengingatkan event handler untuk tidak menggelembungkan acara lebih jauh, dan akan mencegah acara penekanan tombol ditangani lebih lanjut.

CATATAN:

Sudah keluar menunjuk bahwa keyCodeyang sekarang usang . Alternatif terbaik berikutnya whichtelah juga telah usang .

Sayangnya standar yang disukai key, yang banyak didukung oleh browser modern, memiliki beberapa perilaku yang cerdik di IE dan Edge . Apa pun yang lebih tua dari IE11 masih membutuhkan polyfill .

Selain itu, meskipun peringatan yang sudah usang cukup tidak menyenangkan keyCodedan which, menghapusnya akan merupakan perubahan besar pada sejumlah besar situs web warisan. Karena itu, tidak mungkin mereka pergi ke mana saja dalam waktu dekat.

Josh
sumber
4
Apa sebenarnya yang Anda maksud dengan definisi pengguna? Seperti, pengguna mengetik beberapa skrip di kotak teks dan Anda menjalankannya menggunakan Eval () ???
Josh
1
Apakah ini situasi di mana PreventDefualt dapat digunakan?
12
@ Stuart.Sklinar - Melakukan eval pada input yang diketik pengguna di browser memberi mereka kontrol tidak lebih daripada jika mereka membuka konsol perintah di Chrome / FF / IE dan mengetikkan skrip sendiri. Satu-satunya orang yang dapat mereka lukai adalah diri mereka sendiri ... kecuali tentu saja Anda tidak menegakkan keamanan di server. Itu adalah masalah lain.
Josh
1
@SteelBrain - Sekali lagi, memberi seseorang kotak teks yang dapat mereka ketik dan kemudian evalisinya dengan menekan tombol tidak berbeda dengan jika mereka membuka alat pengembang dan melakukannya. Jika ini adalah sesuatu yang diselamatkan ke dalam DB dan bisa dibuka oleh pengguna LAIN , maka itu akan menjadi masalah besar, tapi itu masalah yang sepenuhnya independen dari cuplikan kecil ini.
Josh
5
keyCodesekarang sudah tidak digunakan lagi
John Slegers
138

Gunakan keduanya event.whichdan event.keyCode:

function (event) {
    if (event.which == 13 || event.keyCode == 13) {
        //code to execute here
        return false;
    }
    return true;
};
Agiagnoc
sumber
11
Mengapa baik event.which dan event.keyCode?
Alex Spurling
35
Beberapa browser mendukung dukungan whichorang lain keyCode. Ini adalah praktik yang baik untuk memasukkan keduanya.
user568109
Juga gunakan keydownacara sebagai ganti keyupataukeypress
manish_s
@ Aggiagnoc tetapi acara apa ini harus dilampirkan?
Don Cheadle
2
@manish, penekanan tombol memberi Anda lebih banyak informasi untuk dimainkan daripada keydown / atas. stackoverflow.com/a/9905293/322537
Fzs2
78

Jika Anda menggunakan jQuery:

$('input[type=text]').on('keydown', function(e) {
    if (e.which == 13) {
        e.preventDefault();
    }
});
koboi
sumber
1
Saya tidak bisa melakukan ini. Pawang menyala, tetapi preventDefaultsepertinya tidak menghentikan pengiriman formulir, setidaknya di Chrome.
Drew Noakes
19
Anda harus menggunakan acara keydown alih-alih keyup:$('input[type=text]').on('keydown', function(e) { if (e.which == 13) { e.preventDefault(); } });
Petar Donchev Marinov
2
keyup dipecat SETELAH pengajuan, dan karenanya tidak dapat membatalkannya.
Pierre-Olivier Vares
Baik keyup dan penekanan tombol bekerja untuk saya. Saya pergi dengan menekan tombol. Terima kasih!
markiyanm
'keydown'benar karena komentator lain menyatakan. Karena belum diubah saya akan memperbarui jawabannya. Saya menggunakan jawaban ini dan macet selama beberapa saat sampai saya kembali dan melihat komentar.
Matt K
71

event.key === "Enter"

Lebih baru dan lebih bersih: gunakan event.key. Tidak ada lagi kode angka yang berubah-ubah!

const node = document.getElementsByClassName(".mySelect")[0];
node.addEventListener("keydown", function(event) {
    if (event.key === "Enter") {
        event.preventDefault();
        // Do more work
    }
});

Mozilla Docs

Browser yang Didukung

Gibolt
sumber
Sedang mencari ini. melihat properti kunci di log konsol $ event. pikir itu bisa lebih dapat diandalkan
tatsu
bukankah ini hanya makro atau alias? adakah manfaat dalam hal kinerja dengan menggunakan kode ini?
clockw0rk
1
keyCodesudah ditinggalkan. Ini lebih mudah dibaca dan dipelihara daripada bilangan bulat ajaib dalam kode Anda
Gibolt
17

Mengganti onsubmitaksi formulir menjadi panggilan ke fungsi Anda dan menambahkan return false setelahnya, yaitu:

<form onsubmit="javascript:myfunc();return false;" >
terima kasih
sumber
Saya tidak bisa menimpa onsubmit karena saya memiliki formulir lain kirimkan di halaman ini
Shyju
5
ya kamu bisa. Javascript adalah bahasa berbasis prototipe. document.forms ["form_name"]. onsubmit = fucntion () {}
the_drow
Saya punya prosedur hapus lain untuk dijalankan ketika formulir dikirimkan. Jadi saya ingin mempertahankannya seperti
semula
17

Solusi js bereaksi

 handleChange: function(e) {
    if (e.key == 'Enter') {
      console.log('test');
    }


 <div>
    <Input type="text"
       ref = "input"
       placeholder="hiya"
       onKeyPress={this.handleChange}
    />
 </div>
naskah kafein
sumber
9

Jadi mungkin solusi terbaik untuk menutupi sebanyak mungkin browser dan menjadi bukti di masa depan 

if (event.which === 13 || event.keyCode === 13 || event.key === "Enter")
Matt Doran
sumber
6

jika Anda ingin melakukannya menggunakan skrip java murni di sini adalah contoh yang berfungsi dengan baik

Katakanlah ini adalah file html Anda 

<!DOCTYPE html>
<html>
  <body style="width: 500px">
    <input type="text" id="textSearch"/> 
      <script type="text/javascript" src="public/js/popup.js"></script>
  </body>
</html>

di file popup.js Anda cukup gunakan fungsi ini

var input = document.getElementById("textSearch");
input.addEventListener("keyup", function(event) {
    event.preventDefault();
    if (event.keyCode === 13) {
        alert("yes it works,I'm happy ");
    }
});
DINA TAKLIT
sumber
5

Kode di bawah ini akan menambah pendengar untuk ENTERkunci di seluruh halaman.

Ini bisa sangat berguna di layar dengan satu tombol Aksi misalnya Login, Daftar, Kirim dll. 

<head>
        <!--Import jQuery IMPORTANT -->
        <script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>

         <!--Listen to Enter key event-->
        <script type="text/javascript">

            $(document).keypress(function (e) {
                if (e.which == 13 || event.keyCode == 13) {
                    alert('enter key is pressed');
                }
            });
        </script>
    </head>

Diuji pada semua browser.

Hitesh Sahu
sumber
3

Solusi jQuery.

Saya datang ke sini mencari cara untuk menunda pengiriman formulir sampai setelah kejadian blur pada input teks dipecat.

$(selector).keyup(function(e){
  /*
   * Delay the enter key form submit till after the hidden
   * input is updated.
   */

  // No need to do anything if it's not the enter key
  // Also only e.which is needed as this is the jQuery event object.
  if (e.which !== 13) {
       return;
  }

  // Prevent form submit
  e.preventDefault();

  // Trigger the blur event.
  this.blur();

  // Submit the form.
  $(e.target).closest('form').submit();
});

Akan menyenangkan untuk mendapatkan versi yang lebih umum yang memecat semua acara yang tertunda daripada hanya mengirimkan formulir.

chim
sumber
3

Cara yang jauh lebih sederhana dan efektif dari sudut pandang saya adalah: 

function onPress_ENTER()
{
        var keyPressed = event.keyCode || event.which;

        //if ENTER is pressed
        if(keyPressed==13)
        {
            alert('enter pressed');
            keyPressed=null;
        }
        else
        {
            return false;
        }
}
Terima kasih
sumber
2

Menggunakan TypeScript, dan menghindari panggilan multipel pada fungsi

let el1= <HTMLInputElement>document.getElementById('searchUser');
el1.onkeypress = SearchListEnter;

function SearchListEnter(event: KeyboardEvent) {
    if (event.which !== 13) {
        return;
    }
    // more stuff
}
Wagner Pereira
sumber
Pertanyaan ini sudah berusia lebih dari delapan tahun. Naskah tidak ada saat itu. Jadi, apakah Anda yakin tidak menjawab pertanyaan lain?
Nico Haase
2

Sedikit sederhana

Jangan kirim formulir pada penekanan tombol "Enter":

<form id="form_cdb" onsubmit="return false">

Jalankan fungsi pada penekanan tombol "Enter":

<input type="text" autocomplete="off" onkeypress="if(event.key === 'Enter') my_event()">
rbz
sumber
1

js asli (ambil api)

document.onload = (() => {
    alert('ok');
    let keyListener = document.querySelector('#searchUser');
    // 
    keyListener.addEventListener('keypress', (e) => {
        if(e.keyCode === 13){
            let username = e.target.value;
            console.log(`username = ${username}`);
            fetch(`https://api.github.com/users/${username}`,{
                data: {
                    client_id: 'xxx',
                    client_secret: 'xxx'
                }
            })
            .then((user)=>{
                console.log(`user = ${user}`);
            });
            fetch(`https://api.github.com/users/${username}/repos`,{
                data: {
                    client_id: 'xxx',
                    client_secret: 'xxx'
                }
            })
            .then((repos)=>{
                console.log(`repos = ${repos}`);
                for (let i = 0; i < repos.length; i++) {
                     console.log(`repos ${i}  = ${repos[i]}`);
                }
            });
        }else{
            console.log(`e.keyCode = ${e.keyCode}`);
        }
    });
})();
<input _ngcontent-inf-0="" class="form-control" id="searchUser" placeholder="Github username..." type="text">
Luaskan cuplikan

xgqfrms
sumber
Mengapa client_id dll sudah disertakan di sini? Apakah kodenya sah?
eddyparkinson
1 
<form id="form1" runat="server" onkeypress="return event.keyCode != 13;">

Tambahkan Kode ini di Halaman HTML Anda ... itu akan menonaktifkan ... Enter Button ..

Akhilesh Singh
sumber
0 
<div class="nav-search" id="nav-search">
        <form class="form-search">
            <span class="input-icon">
                <input type="text" placeholder="Search ..." class="nav-search-input" id="search_value" autocomplete="off" />
                <i class="ace-icon fa fa-search nav-search-icon"></i>
            </span>
            <input type="button" id="search" value="Search" class="btn btn-xs" style="border-radius: 5px;">
        </form>

</div>

<script type="text/javascript">
    $("#search_value").on('keydown', function(e) {
        if (e.which == 13) {
             $("#search").trigger('click');
            return false;
        }
    });
    $("#search").on('click',function(){
        alert('You press enter');
    });
</script>
Mizanur Rahaman
sumber
0

Solusi Lintas Browser

Beberapa browser lama menerapkan peristiwa keydown dengan cara yang tidak standar.

KeyBoardEvent.key adalah cara yang seharusnya diterapkan di browser modern.

which dan keyCodesudah usang saat ini, tetapi tidak ada salahnya untuk memeriksa peristiwa ini meskipun demikian kode tersebut berfungsi untuk pengguna yang masih menggunakan browser lama seperti IE.

The isKeyPressedcek fungsi jika kunci ditekan itu masuk dan event.preventDefault()menghalangi bentuk dari mengirimkan.

  if (isKeyPressed(event, 'Enter', 13)) {
    event.preventDefault();
    console.log('enter was pressed and is prevented');
  }

Contoh kerja minimal

JS

function isKeyPressed(event, expectedKey, expectedCode) {
  const code = event.which || event.keyCode;

  if (expectedKey === event.key || code === expectedCode) {
    return true;
  }
  return false;
}

document.getElementById('myInput').addEventListener('keydown', function(event) {
  if (isKeyPressed(event, 'Enter', 13)) {
    event.preventDefault();
    console.log('enter was pressed and is prevented');
  }
});

HTML

<form>
  <input id="myInput">
</form>

https://jsfiddle.net/tobiobeck/z13dh5r2/

Tobi Obeck
sumber