Ingresar evento de pulsación de tecla en JavaScript

330

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?

javascript forms keypress dom-events enter Shyju
fuente

Respuestas:

445 
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.

NOTA:

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.

Josh
fuente
44
¿Qué quiere decir exactamente con usuario definido? Al igual, el usuario escribe algún script en un cuadro de texto y lo ejecuta usando Eval () ???
Josh
1
¿Es esta una situación en la que se puede utilizar PreventDefualt?
12
@ Stuart.Sklinar: al realizar una evaluación en la entrada que el usuario escribió en el navegador, no tiene más control que si abrieran la consola de comandos en Chrome / FF / IE y escribieran el script ellos mismos. La única persona a la que pueden lastimar es a sí mismos ... a menos, por supuesto, que no esté aplicando seguridad en el servidor. Esa es otra cuestión por completo.
Josh
1
@SteelBrain: una vez más, darle a alguien un cuadro de texto que puede escribir y luego 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.
Josh
55
keyCodeahora está en desuso
John Slegers
138

Use ambos event.whichy event.keyCode:

function (event) {
    if (event.which == 13 || event.keyCode == 13) {
        //code to execute here
        return false;
    }
    return true;
};
Agiagnoc
fuente
11
¿Por qué tanto event.which como event.keyCode?
Alex Spurling
35
Algunos navegadores son compatibles con whichotros keyCode. Es una buena práctica incluir ambos.
user568109
También use el keydownevento en lugar de keyuporkeypress
manish_s el
@Agiagnoc, pero ¿a qué evento se debe adjuntar esto?
Don Cheadle
2
@manish, la pulsación de teclas te brinda más información para jugar que presionar teclas arriba / abajo. stackoverflow.com/a/9905293/322537
Fzs2
78

Si estás usando jQuery:

$('input[type=text]').on('keydown', function(e) {
    if (e.which == 13) {
        e.preventDefault();
    }
});
vaquero
fuente
1
No pude hacer que esto funcione. El controlador se activa, pero preventDefaultno parece detener el envío del formulario, al menos en Chrome.
Drew Noakes
19
Debe usar el evento keydown en lugar de keyup:$('input[type=text]').on('keydown', function(e) { if (e.which == 13) { e.preventDefault(); } });
Petar Donchev Marinov el
2
keyup se activa DESPUÉS del envío y, por lo tanto, no puede cancelarlo.
Pierre-Olivier Vares
Tanto keyup como keypress funcionaron para mí. Fui con la tecla presionada. ¡Gracias!
markiyanm
'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.
Matt K
71

event.key === "Enter"

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

Documentos de Mozilla

Navegadores Soportados

Gibolt
fuente
Estaba buscando esto. vi la propiedad clave en el registro de la consola de $ event. pensé que podría ser más confiable
tatsu
¿No es esto solo una macro o un alias? ¿Hay algún beneficio en términos de rendimiento al usar este código?
clockw0rk
1
keyCodees obsoleto. Esto es más legible y mantenible que un entero mágico en su código
Gibolt
17

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;" >
rpkelly
fuente
No puedo anular onsubmit ya que tengo otra forma de presentar en esta página
Shyju
55
sí tu puedes. Javascript es un lenguaje basado en prototipos. document.forms ["form_name"]. onsubmit = fucntion () {}
the_drow
Tengo que ejecutar otro procedimiento de eliminación cuando se envía el formulario, así que quiero mantenerlo tal como está
Shyju
17

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>
cafeína
fuente
9

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")
Matt Doran
fuente
6

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 ");
    }
});
DINA TAKLIT
fuente
5

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.

Hitesh Sahu
fuente
3

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.

chim
fuente
3

Una manera 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;
        }
}
Thanos
fuente
2

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
}
Wagner Pereira
fuente
Esta pregunta tiene más de ocho años. La mecanografía no existía entonces. Entonces, ¿estás seguro de que no estás respondiendo otra pregunta?
Nico Haase
2

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()">
rbz
fuente
1

JS nativo (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">
Expandir fragmento

xgqfrms
fuente
¿Por qué se ha incluido client_id, etc.? ¿Es legítimo el código?
eddyparkinson
1 
<form id="form1" runat="server" onkeypress="return event.keyCode != 13;">

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

Akhilesh Singh
fuente
0 
<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>
Mizanur Rahaman
fuente
0

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

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/

Tobi Obeck
fuente