Tengo un form con dos cuadros de texto, uno seleccionar desplegable y un botón de opción . Cuando se presiona la tecla enter , 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 form cuando se presiona la tecla enter ?

314
Shyju 25 may. 2009 a las 07:31

18 respuestas

La mejor respuesta
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 una secuencia de comandos "definida 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.

Nota:

Se ha señalado que keyCode es ahora está en desuso. La siguiente mejor alternativa which ha también ha quedado en desuso.

Desafortunadamente, el estándar favorito key, que es ampliamente compatible con los navegadores modernos, tiene un comportamiento dudoso en IE y Edge. Cualquier cosa anterior a IE11 aún necesitaría un polyfill.

Además, si bien la advertencia en desuso es bastante ominosa sobre keyCode y which, eliminarlos 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.

428
Josh 18 may. 2018 a las 18:05

Utilice tanto event.which como event.keyCode:

function (event) {
    if (event.which == 13 || event.keyCode == 13) {
        //code to execute here
        return false;
    }
    return true;
};
136
Bradley4 9 abr. 2015 a las 05:50

Una solución jQuery.

Vine aquí buscando una forma 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.

3
chim 13 may. 2015 a las 16:27

Un poco simple

No envíe el formulario al presionar "Enter":

<form id="form_cdb" onsubmit="return false">

Ejecute la función al presionar la tecla "Enter":

<input type="text" autocomplete="off" onkeypress="if(event.key === 'Enter') my_event()">
1
rbz 1 feb. 2019 a las 09:30

Entonces, tal vez la mejor solución para cubrir tantos navegadores como sea posible y ser una prueba futura sería

if (event.which === 13 || event.keyCode === 13 || event.key === "Enter")
9
Matt Doran 15 may. 2019 a las 10:40

Detectar la tecla Enter presionada en todo el documento:

$(document).keypress(function (e) {
    if (e.which == 13) {
        alert('enter key is pressed');
    }
});

http://jsfiddle.net/umerqureshi/dcjsa08n/3/

22
umer 16 jun. 2015 a las 05:58

Si estás usando jQuery:

$('input[type=text]').on('keydown', function(e) {
    if (e.which == 13) {
        e.preventDefault();
    }
});
76
Matt K 6 ene. 2016 a las 18:14

Anule la acción onsubmit 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;" >
17
Shyju 25 jun. 2012 a las 04:14
<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>
0
Mizanur Rahaman 28 ago. 2017 a las 04:41

Solución de navegador cruzado

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 keyCode están en desuso en la actualidad, pero no está de más buscar estos eventos para que el código funcione para los usuarios que aún usan navegadores más antiguos como IE.

La función isKeyPressed verifica si la tecla presionada fue ingresada y event.preventDefault() impide que se envíe el formulario.

  if (isKeyPressed(event, 'Enter', 13)) {
    event.preventDefault();
    console.log('enter was pressed and is prevented');
  }

Ejemplo de trabajo mínimo

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>

https://jsfiddle.net/tobiobeck/z13dh5r2/

0
Tobi Obeck 28 oct. 2019 a las 09:42

Js nativa (buscar 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">
1
Yvette Colomb 28 may. 2018 a las 13:02

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
    }
});

Documentos de Mozilla

Navegadores Soportados

63
Gibolt 19 ene. 2018 a las 19:02

El siguiente código agregará un oyente para la clave 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.

5
Hitesh Sahu 14 dic. 2016 a las 07:40

Usando TypeScript, y evita múltiples llamadas en la función

let el1= <HTMLInputElement>document.getElementById('searchUser');
el1.onkeypress = SearchListEnter;

function SearchListEnter(event: KeyboardEvent) {
    if (event.which !== 13) {
        return;
    }
    // more stuff
}
2
Wagner Pereira 14 mar. 2018 a las 21:18

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;
        }
}
2
Thanos 7 jun. 2015 a las 11:07

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 ");
    }
});
6
DINA TAKLIT 16 jun. 2018 a las 23:04
<form id="form1" runat="server" onkeypress="return event.keyCode != 13;">

Agregue este código en su página HTML ... deshabilitará ... Botón Intro ...

0
Akhilesh Singh 8 nov. 2019 a las 06:16

Una solución para reaccionar

 handleChange: function(e) {
    if (e.key == 'Enter') {
      console.log('test');
    }


 <div>
    <Input type="text"
       ref = "input"
       placeholder="hiya"
       onKeyPress={this.handleChange}
    />
 </div>
16
caffeinescript 8 ene. 2016 a las 07:15