Tengo una formcon dos cuadros de texto, uno seleccione abajo caída y uno botón de radio . Cuando enterse presiona la tecla, quiero llamar a una función Javascript (definida por el usuario), pero cuando la presiono, se envía el formulario.
¿Cómo evito que formse envíe cuando enterse presiona la tecla?
Respuestas:
if(characterCode == 13)
{
return false; // returning false will prevent the event from bubbling up.
}
else
{
return true;
}
Ok, entonces imagina que tienes el siguiente cuadro de texto en un formulario:
<input id="scriptBox" type="text" onkeypress="return runScript(event)" />Para ejecutar un script "definido por el usuario" desde este cuadro de texto cuando se presiona la tecla Intro, y no hacer que envíe el formulario, aquí hay un código de muestra . 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 correctamente, necesita una solución más sólida, 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 vuelva a hacer burbujas en el evento y evitará que el evento de pulsación de tecla se siga manejando.
Se ha señalado que ahorakeyCode está en desuso . La siguiente mejor alternativa tambiénwhich ha quedado en desuso .
Desafortunadamente, el estándar preferido key, que es ampliamente compatible con los navegadores modernos, tiene un comportamiento poco fiable en IE y Edge . Cualquier cosa anterior a IE11 aún necesitaría un polyfill .
Además, si bien la advertencia obsoleta es bastante ominosa keyCodey su whicheliminación representaría un cambio radical masivo para un número incontable de sitios web heredados. Por esa razón, es poco probable que vayan a algún lado pronto.
evalpresionar un botón no es diferente de si abrieran las herramientas de desarrollador y lo hicieran. Si esto fuera algo que se estaba guardando en la base de datos y otro usuario pudiera abrirlo , entonces sería un gran problema, pero ese es un problema que es completamente independiente de este pequeño fragmento.
Use ambos event.whichy event.keyCode:
function (event) {
if (event.which == 13 || event.keyCode == 13) {
//code to execute here
return false;
}
return true;
};
whichotros keyCode. Es una buena práctica incluir ambos.
keydownevento en lugar de keyuporkeypress
Si estás usando jQuery:
$('input[type=text]').on('keydown', function(e) {
if (e.which == 13) {
e.preventDefault();
}
});
preventDefaultno parece detener el envío del formulario, al menos en Chrome.
$('input[type=text]').on('keydown', function(e) { if (e.which == 13) { e.preventDefault(); } });
'keydown'es correcto como los otros comentaristas están afirmando. Como no ha cambiado, actualizaré la respuesta. Usé esta respuesta y me quedé atrapado por un tiempo hasta que regresé y miré los comentarios.
Más reciente y mucho más limpio: uso 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
}
});
keyCodees obsoleto. Esto es más legible y mantenible que un entero mágico en su código
Detectar la tecla Enter presionada en todo el documento:
$(document).keypress(function (e) {
if (e.which == 13) {
alert('enter key is pressed');
}
});
Anule la onsubmitacción del formulario para que sea una llamada a su función y agregue return false después, es decir:
<form onsubmit="javascript:myfunc();return false;" >Entonces, tal vez la mejor solución para cubrir tantos navegadores como sea posible y estar a prueba del futuro sería
if (event.which === 13 || event.keyCode === 13 || event.key === "Enter")si quieres hacerlo usando el 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 simplemente 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 ");
}
});El siguiente código agregará un oyente para la ENTERclave 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.
Una solución jQuery.
Vine aquí buscando una manera de retrasar el envío del formulario hasta después de que se desencadenara el evento borroso 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();
});Sería bueno obtener una versión más general que disparara todos los eventos retrasados en lugar de solo enviar el formulario.
Usando TypeScript, y evita 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
}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;">Agregue este código en su página HTML ... deshabilitará ... Botón Intro ...
<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>Algunos navegadores antiguos implementaron eventos keydown de una manera no estándar.
KeyBoardEvent.key es la forma en que se supone que debe implementarse en los navegadores modernos.
which
y keyCodeestán en desuso hoy en día, pero no está de más buscar estos eventos para que el código funcione para los usuarios que todavía usan navegadores más antiguos como IE.
La isKeyPressedfunción verifica si se ingresó la tecla presionada y event.preventDefault()dificulta el envío del formulario.
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>