Ho un formcon due caselle di testo, una a discesa seleziona e un pulsante di opzione . Quando entersi preme il tasto, desidero chiamare una funzione Javascript (definita dall'utente), ma quando lo premo viene inviato il modulo.
Come evitare che formvenga inviato quando entersi preme il tasto?
Risposte:
if(characterCode == 13)
{
return false; // returning false will prevent the event from bubbling up.
}
else
{
return true;
}
Ok, quindi immagina di avere la seguente casella di testo in un modulo:
<input id="scriptBox" type="text" onkeypress="return runScript(event)" />Per eseguire uno script "definito dall'utente" da questa casella di testo quando viene premuto il tasto Invio e non è necessario inviare il modulo, ecco un codice di esempio . Si noti che questa funzione non esegue alcun controllo degli errori e molto probabilmente funzionerà solo in IE. Per fare questo, hai bisogno di una soluzione più solida, ma otterrai l'idea generale.
function runScript(e) {
//See notes about 'which' and 'key'
if (e.keyCode == 13) {
var tb = document.getElementById("scriptBox");
eval(tb.value);
return false;
}
}
la restituzione del valore della funzione avviserà il gestore dell'evento di non creare più bolle sull'evento e impedirà che l'evento keypress venga ulteriormente gestito.
È stato sottolineato che orakeyCode è deprecato . Anche la prossima migliore alternativa whichè stata deprecata .
Sfortunatamente lo standard preferito key, che è ampiamente supportato dai browser moderni, ha un comportamento instabile in IE e Edge . Qualunque cosa più vecchia di IE11 avrebbe comunque bisogno di un polyfill .
Inoltre, mentre l'avvertimento deprecato è alquanto inquietante keyCodee which, rimuoverli rappresenterebbe un enorme cambiamento decisivo verso un numero imprecisato di siti Web legacy. Per questo motivo, è improbabile che vadano ovunque in qualunque momento presto.
evalil contenuto premendo un pulsante non è diverso rispetto a se aprissero gli strumenti di sviluppo e lo facessero. Se questo fosse qualcosa che veniva salvato nel DB e poteva essere aperto da UN ALTRO utente, sarebbe un grosso problema, ma questo è un problema completamente indipendente da questo piccolo frammento.
Usa entrambi event.whiche event.keyCode:
function (event) {
if (event.which == 13 || event.keyCode == 13) {
//code to execute here
return false;
}
return true;
};
whichaltri keyCode. È buona norma includere entrambi.
keydownevento invece di keyupokeypress
Se stai usando jQuery:
$('input[type=text]').on('keydown', function(e) {
if (e.which == 13) {
e.preventDefault();
}
});
preventDefaultnon sembra interrompere l'invio del modulo, almeno in Chrome.
$('input[type=text]').on('keydown', function(e) { if (e.which == 13) { e.preventDefault(); } });
'keydown'è corretto come affermano gli altri commentatori. Poiché non è stato modificato, aggiornerò la risposta. Ho usato questa risposta e sono rimasto bloccato per un po 'fino a quando sono tornato e ho guardato i commenti.
Più recente e molto più pulito: usare event.key. Niente più codici numerici arbitrari!
const node = document.getElementsByClassName(".mySelect")[0];
node.addEventListener("keydown", function(event) {
if (event.key === "Enter") {
event.preventDefault();
// Do more work
}
});
keyCodeè deprecato. Questo è più leggibile e mantenibile di un intero magico nel tuo codice
Rileva il tasto Invio premuto sull'intero documento:
$(document).keypress(function (e) {
if (e.which == 13) {
alert('enter key is pressed');
}
});
Sostituisci l' onsubmitazione del modulo per essere una chiamata alla tua funzione e aggiungi return false dopo di essa, ovvero:
<form onsubmit="javascript:myfunc();return false;" >Una soluzione di reazione js
handleChange: function(e) {
if (e.key == 'Enter') {
console.log('test');
}
<div>
<Input type="text"
ref = "input"
placeholder="hiya"
onKeyPress={this.handleChange}
/>
</div>Quindi forse la migliore soluzione per coprire quanti più browser possibile ed essere a prova di futuro sarebbe
if (event.which === 13 || event.keyCode === 13 || event.key === "Enter")se vuoi farlo usando lo script puramente java ecco un esempio che funziona perfettamente
Diciamo che questo è il tuo file html
<!DOCTYPE html>
<html>
<body style="width: 500px">
<input type="text" id="textSearch"/>
<script type="text/javascript" src="public/js/popup.js"></script>
</body>
</html>nel tuo file popup.js basta usare questa funzione
var input = document.getElementById("textSearch");
input.addEventListener("keyup", function(event) {
event.preventDefault();
if (event.keyCode === 13) {
alert("yes it works,I'm happy ");
}
});Di seguito il codice aggiungerà listener per ENTERchiave su tutta la pagina.
Questo può essere molto utile nelle schermate con un solo pulsante di azione, ad esempio Login, Registrati, Invia, ecc.
<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>Testato su tutti i browser.
Una soluzione jQuery.
Sono venuto qui alla ricerca di un modo per ritardare l'invio del modulo fino a quando l'evento di sfocatura sull'input di testo era stato attivato.
$(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();
});Sarebbe bello ottenere una versione più generale che ha generato tutti gli eventi in ritardo anziché solo l'invio del modulo.
Utilizzando TypeScript, ed evita chiamate multiple sulla funzione
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;">Aggiungi questo codice nella tua pagina HTML ... disabiliterà ... Tasto Enter ...
<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>Alcuni browser meno recenti hanno implementato eventi keydown in un modo non standard.
KeyBoardEvent.key è il modo in cui dovrebbe essere implementato nei browser moderni.
which
e keyCodesono deprecati al giorno d'oggi, ma non fa male controllare questi eventi in modo che il codice funzioni per gli utenti che usano ancora browser più vecchi come IE.
La isKeyPressedfunzione controlla se il tasto premuto è stato inserito e event.preventDefault()impedisce l'invio del modulo.
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>