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?
Jawaban:
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.
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.
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.
Gunakan keduanya event.whichdan event.keyCode:
function (event) {
if (event.which == 13 || event.keyCode == 13) {
//code to execute here
return false;
}
return true;
};whichorang lain keyCode. Ini adalah praktik yang baik untuk memasukkan keduanya.
keydownacara sebagai ganti keyupataukeypress
Jika Anda menggunakan jQuery:
$('input[type=text]').on('keydown', function(e) {
if (e.which == 13) {
e.preventDefault();
}
});preventDefaultsepertinya tidak menghentikan pengiriman formulir, setidaknya di Chrome.
$('input[type=text]').on('keydown', function(e) { if (e.which == 13) { e.preventDefault(); } });
'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.
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
}
});keyCodesudah ditinggalkan. Ini lebih mudah dibaca dan dipelihara daripada bilangan bulat ajaib dalam kode Anda
Deteksi tombol Enter ditekan pada seluruh dokumen:
$(document).keypress(function (e) {
if (e.which == 13) {
alert('enter key is pressed');
}
});Mengganti onsubmitaksi formulir menjadi panggilan ke fungsi Anda dan menambahkan return false setelahnya, yaitu:
<form onsubmit="javascript:myfunc();return false;" >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>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")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 ");
}
});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.
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.
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;
}
}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
}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"><form id="form1" runat="server" onkeypress="return event.keyCode != 13;">Tambahkan Kode ini di Halaman HTML Anda ... itu akan menonaktifkan ... Enter Button ..
<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>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');
}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>