Tasto Invio evento stampa in JavaScript
https://stackoverflow.com/questions/905222
-
05-09-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianDomanda
Ho un form con due caselle di testo, una Seleziona a discesa ed un pulsante Radio . Quando si preme il tasto invio, voglio chiamare una funzione JavaScript (definita dall'utente), ma quando premo esso, il modulo viene inviato.
Come posso evitare il form di essere presentata quando il Invio viene premuto chiave?
Soluzione
if(characterCode == 13)
{
return false; // returning false will prevent the event from bubbling up.
}
else
{
return true;
}
Ok, quindi immaginate di avere la seguente casella di testo in un form:
<input id="scriptBox" type="text" onkeypress="return runScript(event)" />
Al fine di eseguire alcuni script "definito dall'utente" da questa casella di testo quando si preme il tasto Invio, e non ce l'ha inviato il modulo, ecco alcune campione di codice. Si prega di notare che questa funzione non fa alcun controllo degli errori e molto probabilmente funzionerà solo in IE. Per fare questo diritto è necessaria una soluzione più robusta, ma si otterrà 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;
}
}
restituendo il valore della funzione avvisa il gestore di eventi non bolla l'evento oltre, e impedirà l'evento keypress di essere gestito ulteriormente.
NOTA:
E 'stato sottolineato che keyCode è ora deprecato . La prossima migliore alternativa which ha anche stato deprecato .
Purtroppo la key standard di favorita, che è ampiamente supportato dai browser moderni, ha alcune comportamento evasivo in IE e bordo . Qualsiasi cosa più grande di IE11 avrebbe ancora bisogno di un polyfill .
Inoltre, mentre l'avviso deprecato è abbastanza inquietante circa keyCode e which, rimuovendo quelli rappresenterebbe un grande cambiamento di rottura di un numero imprecisato di siti web legacy. Per questo motivo, è poco probabile che stanno andando da nessuna parte in qualunque momento presto.
Altri suggerimenti
Usa sia event.which e event.keyCode:
function (event) {
if (event.which == 13 || event.keyCode == 13) {
//code to execute here
return false;
}
return true;
};
Se stai usando jQuery:
$('input[type=text]').on('keydown', function(e) {
if (e.which == 13) {
e.preventDefault();
}
});
event.key === "Enter"
più recente e molto più pulito: utilizzare event.key. codici numerici Non più arbitrarie!
const node = document.getElementsByClassName(".mySelect")[0];
node.addEventListener("keydown", function(event) {
if (event.key === "Enter") {
event.preventDefault();
// Do more work
}
});
Rileva Inserisci premuto sul tutto il documento chiave:
$(document).keypress(function (e) {
if (e.which == 13) {
alert('enter key is pressed');
}
});
Override l'azione onsubmit del modulo per essere una chiamata alla funzione e aggiungere restituire false dopo che è, vale a dire:
<form onsubmit="javascript:myfunc();return false;" >
Una soluzione di reagire js
handleChange: function(e) {
if (e.key == 'Enter') {
console.log('test');
}
<div>
<Input type="text"
ref = "input"
placeholder="hiya"
onKeyPress={this.handleChange}
/>
</div>
se si vuole farlo utilizzando java script purly Ecco un esempio che funzionano perfettamente
Diciamo che questo è il vostro 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>
in popup.js file 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 chiave ENTER su tutta la pagina.
Questo può essere molto utile in schermi con un'unica azione tasto per esempio Login, Register, ecc Invia
<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.
Quindi, forse la soluzione migliore per coprire il maggior numero possibile di browser ed essere a prova di futuro sarebbe stato
if (event.which === 13 || event.keyCode === 13 || event.key === "Enter")
Una soluzione jQuery.
Sono venuto qui in cerca di un modo per ritardare l'invio del modulo fino a dopo l'evento sfocatura sul immissione di testo era stato licenziato.
$(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 avere una versione più generale, che hanno sparato tutti gli eventi in ritardo, piuttosto che solo la forma presentare.
Un modo molto più semplice ed efficace dal mio punto di vista dovrebbe essere:
function onPress_ENTER()
{
var keyPressed = event.keyCode || event.which;
//if ENTER is pressed
if(keyPressed==13)
{
alert('enter pressed');
keyPressed=null;
}
else
{
return false;
}
}
Utilizzando tipografico, ed evitare più chiamate sulla funzione
let el1= <HTMLInputElement>document.getElementById('searchUser');
el1.onkeypress = SearchListEnter;
function SearchListEnter(event: KeyboardEvent) {
if (event.which !== 13) {
return;
}
// more stuff
}
js nativi (prendere 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">
Un po 'di semplice
Non inviare il modulo a pressione del tasto "Enter":
<form id="form_cdb" onsubmit="return false">
Eseguire la funzione su pressione del tasto "Enter":
<input type="text" autocomplete="off" onkeypress="if(event.key === 'Enter') my_event()">
<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>
Questa funzione preventKey() funziona indipendentemente dalle caratteristiche del browser deprecate.
Solo which (obsoleto) una delle tre proprietà, keyCode (sconsigliato) o key (problemi in IE) deve essere presente.
https://jsfiddle.net/tobiobeck/z13dh5r2/
JS
function preventKey(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 (preventKey(event, 'Enter', 13)) {
event.preventDefault();
}
});
HTML
<form>
<input id="myInput">
</form>
Browser Testing
Se si desidera testare diversi browser commento manualmente o uno rimuovere il commento delle seguenti tre righe event.something:
var event = {};
event.which = 13;
//event.keyCode = 13;
//event.key = 'Enter'
if (preventKey(event, 'Enter', 13)) {
console.log('enter was pressed');
}
