Bir var formiki metin kutuları, tek ile seçme damla aşağı ve bir radyo düğmesi . Ne zaman entertuşuna basıldığında, bir JavaScript fonksiyonunu (Kullanıcı tanımlı) aramak istediğiniz, ama bunu bastığınızda form gönderildiğinde.
Tuşa basıldığında formgönderilmesini nasıl önleyebilirim enter?
Yanıtlar:
if(characterCode == 13)
{
return false; // returning false will prevent the event from bubbling up.
}
else
{
return true;
}Tamam, bir formda aşağıdaki metin kutusuna sahip olduğunuzu düşünün:
<input id="scriptBox" type="text" onkeypress="return runScript(event)" />Enter tuşuna basıldığında bu metin kutusundan bazı "kullanıcı tanımlı" komut dosyalarını çalıştırmak ve formu göndermemesini sağlamak için bazı örnek kodlar aşağıda verilmiştir. Bu işlevin herhangi bir hata denetimi yapmadığını ve büyük olasılıkla yalnızca IE'de çalışacağını lütfen unutmayın. Bunu doğru yapmak için daha sağlam bir çözüme ihtiyacınız var, ancak genel fikri anlayacaksınız.
function runScript(e) {
//See notes about 'which' and 'key'
if (e.keyCode == 13) {
var tb = document.getElementById("scriptBox");
eval(tb.value);
return false;
}
}işlevin değerini döndürmek, olay işleyicisini daha fazla olayı tetiklememesi için uyarır ve keypress olayının daha fazla işlenmesini önler.
Bu sivri out oldu keyCodealmaktadır şimdi artık yok . Bir sonraki en iyi alternatiftir whichgelmiştir da kaldırıldı .
Ne yazık ki, keymodern tarayıcılar tarafından yaygın olarak desteklenen tercih edilen standart , IE ve Edge'de bazı tehlikeli davranışlara sahiptir . IE11 eski olanlar hala gerekir polyfill .
Kaldırılan uyarı konusunda oldukça uğursuz iken Dahası, keyCodeve whichbu çıkarmadan eski web sitelerinin anlatılmamış sayılar için büyük bir kırılma değişikliğini temsil eder. Bu nedenle, yakında herhangi bir yere gitmeleri pek olası değildir.
evalbir düğmeye basarak içerik geliştirici araçlarını açıp yaptıklarından farklı değildir. Bu, DB'ye kaydedilen ve başka bir kullanıcı tarafından açılabilecek bir şey olsaydı, o zaman büyük bir anlaşma olurdu, ancak bu bu küçük snippet'ten tamamen bağımsız bir sorundur.
Her ikisini de kullanın event.whichve event.keyCode:
function (event) {
if (event.which == 13 || event.keyCode == 13) {
//code to execute here
return false;
}
return true;
};whichdiğerlerini destekler keyCode. Her ikisini de dahil etmek iyi bir uygulamadır.
keydownkeyupkeypress
JQuery kullanıyorsanız:
$('input[type=text]').on('keydown', function(e) {
if (e.which == 13) {
e.preventDefault();
}
});preventDefaulten az Chrome'da tetikleniyor, ancak formun gönderilmesini durdurmuyor gibi görünüyor.
$('input[type=text]').on('keydown', function(e) { if (e.which == 13) { e.preventDefault(); } });
'keydown'diğer yorumcular belirttiği gibi doğrudur. Değiştirilmediğinden cevabı güncelleyeceğim. Bu cevabı kullandım ve geri dönüp yorumlara bakana kadar bir süre takılı kaldım.
Daha yeni ve daha temiz: kullanın event.key. Artık keyfi sayı kodları yok!
const node = document.getElementsByClassName(".mySelect")[0];
node.addEventListener("keydown", function(event) {
if (event.key === "Enter") {
event.preventDefault();
// Do more work
}
});keyCodekullanımdan kaldırıldı. Bu, kodunuzdaki sihirli bir tamsayıdan daha okunabilir ve bakımı yapılabilir
Tüm belgeye basılan Enter tuşuna basın:
$(document).keypress(function (e) {
if (e.which == 13) {
alert('enter key is pressed');
}
});onsubmitİşlevinizin çağrısı olarak formun eylemini geçersiz kılın ve sonradan false değerini ekleyin, yani:
<form onsubmit="javascript:myfunc();return false;" >Bir reaksiyon js çözeltisi
handleChange: function(e) {
if (e.key == 'Enter') {
console.log('test');
}
<div>
<Input type="text"
ref = "input"
placeholder="hiya"
onKeyPress={this.handleChange}
/>
</div>Bu yüzden, mümkün olduğu kadar çok tarayıcıyı kapsayacak ve geleceğin kanıtı olacak belki de en iyi çözüm
if (event.which === 13 || event.keyCode === 13 || event.key === "Enter")Tamamen java komut dosyası kullanarak yapmak istiyorsanız, burada mükemmel çalışan bir örnek var
Bunun html dosyanız olduğunu varsayalım
<!DOCTYPE html>
<html>
<body style="width: 500px">
<input type="text" id="textSearch"/>
<script type="text/javascript" src="public/js/popup.js"></script>
</body>
</html>senin içinde popup.js dosyası sadece bu fonksiyonu kullanmak
var input = document.getElementById("textSearch");
input.addEventListener("keyup", function(event) {
event.preventDefault();
if (event.keyCode === 13) {
alert("yes it works,I'm happy ");
}
});Aşağıdaki kod için dinleyici ekleyecektir ENTER , tüm sayfaya anahtar için .
Bu, Tek Eylem düğmeli ekranlarda çok yararlı olabilir, örneğin Giriş, Kayıt, Gönder vb.
<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>Tüm tarayıcılarda test edildi.
Bir jQuery çözümü.
Buraya, metin girişindeki bulanıklık olayı tetiklenene kadar form gönderimini ertelemenin bir yolunu aradım.
$(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();
});Sadece formu göndermek yerine tüm gecikmeli olayları ateş daha genel bir sürüm almak için iyi olurdu.
TypeScript kullanma ve işlevde birden çok çağrıyı önleme
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;">Bu Kodu HTML Sayfanıza Ekleyin ... devre dışı bırakılacaktır ... Enter Düğmesi ..
<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>Bazı eski tarayıcılar, standart dışı bir şekilde anahtarlama olayları uygulamıştır.
KeyBoardEvent.key , modern tarayıcılarda uygulanması gereken yoldur.
which
ve keyCodegünümüzde kullanımdan kaldırılmıştır, ancak yine de bu olayları kontrol etmek zarar vermez, böylece kod IE gibi eski tarayıcıları kullanan kullanıcılar için çalışır.
isKeyPressedFonksiyon kontrolleri pres anahtar girip eğer event.preventDefault()göndermelerini engel olması olarak formu.
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>