forms - teclado - onkeyup jquery
Introduzca el evento de pulsación de tecla en JavaScript (14)
event.key === "Enter"
Más reciente y mucho más limpio: use event.key . No más códigos de números arbitrarios!
const node = document.getElementsByClassName(".mySelect")[0];
node.addEventListener("keydown", function(event) {
if (event.key === "Enter") {
event.preventDefault();
// Do more work
}
});
Tengo un form con dos cuadros de texto, un menú desplegable de selección y un botón de opción . Cuando se presiona la tecla Intro , quiero llamar a una función javascript (definida por el usuario), pero cuando la presiono, se envía el formulario.
¿Cómo evito que se envíe el form cuando se presiona la tecla Intro ?
js nativo (fetch 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">
Detectar la tecla Enter presionada en todo el documento:
$(document).keypress(function (e) {
if (e.which == 13) {
alert(''enter key is pressed'');
}
});
El siguiente código agregará un oyente para la tecla ENTER en toda la página.
Esto puede ser muy útil en pantallas con un solo botón de Acción, por ejemplo, Iniciar sesión, Registrarse, Enviar, etc.
<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>
Probado en todos los navegadores.
Si desea hacerlo utilizando un script puramente java, aquí hay un ejemplo que funciona perfectamente.
Digamos que este es tu archivo 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>
en su archivo popup.js solo use esta función
var input = document.getElementById("textSearch");
input.addEventListener("keyup", function(event) {
event.preventDefault();
if (event.keyCode === 13) {
alert("yes it works,I''m happy ");
}
});
Si estás usando jQuery:
$(''input[type=text]'').on(''keydown'', function(e) {
if (e.which == 13) {
e.preventDefault();
}
});
Una solución jQuery.
Vine aquí en busca de una forma de retrasar el envío del formulario hasta que se haya activado el evento de desenfoque en la entrada de texto.
$(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();
});
Estaría bien obtener una versión más general que activó todos los eventos retrasados en lugar de solo enviar el formulario.
Una solución reactiva js
handleChange: function(e) {
if (e.key == ''Enter'') {
console.log(''test'');
}
<div>
<Input type="text"
ref = "input"
placeholder="hiya"
onKeyPress={this.handleChange}
/>
</div>
Usando TypeScript, y evitando llamadas múltiples en la función
let el1= <HTMLInputElement>document.getElementById(''searchUser'');
el1.onkeypress = SearchListEnter;
function SearchListEnter(event: KeyboardEvent) {
if (event.which !== 13) {
return;
}
// more stuff
}
Utilice ambos event.which y event.keyCode :
function (event) {
if (event.which == 13 || event.keyCode == 13) {
//code to execute here
return false;
}
return true;
};
onsubmit acción onsubmit del formulario para que sea una llamada a su función y agregue return false después de ello, es decir:
<form onsubmit="javascript:myfunc();return false;" >
Una forma mucho más simple y efectiva desde mi perspectiva debería ser:
function onPress_ENTER()
{
var keyPressed = event.keyCode || event.which;
//if ENTER is pressed
if(keyPressed==13)
{
alert(''enter pressed'');
keyPressed=null;
}
else
{
return false;
}
}
<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>
if(characterCode == 13)
{
return false; // returning false will prevent the event from bubbling up.
}
else
{
return true;
}
Ok, así que imagina que tienes el siguiente cuadro de texto en un formulario:
<input id="scriptBox" type="text" onkeypress="return runScript(event)" />
Para ejecutar una secuencia de comandos "definida por el usuario" desde este cuadro de texto cuando se presiona la tecla Intro, y no tener que enviar el formulario, aquí hay un código de ejemplo . Tenga en cuenta que esta función no realiza ninguna comprobación de errores y lo más probable es que solo funcione en IE. Para hacer esto bien, necesita una solución más robusta, pero obtendrá la idea general.
function runScript(e) {
//See notes about ''which'' and ''key''
if (e.keyCode == 13) {
var tb = document.getElementById("scriptBox");
eval(tb.value);
return false;
}
}
devolver el valor de la función alertará al controlador de eventos para que no haga más burbujas en el evento, y evitará que el evento de pulsación de tecla se siga manejando.
NOTA:
Se ha señalado que keyCode ahora está en desuso . La siguiente mejor alternativa which también ha sido desaprobada .
Desafortunadamente, la key estándar preferida, que es ampliamente compatible con los navegadores modernos, tiene un comportamiento poco fiable en IE y Edge . Cualquier cosa más antigua que IE11 todavía necesitaría un polyfill .
Además, mientras que la advertencia desaprobada es bastante ominosa acerca de keyCode y which , eliminarlos representaría un cambio de ruptura masivo a un número incalculable de sitios web heredados. Por esa razón, es poco probable que vayan a algún lugar pronto.