¿Cómo activo un botón HTML cuando se presiona la tecla “Enter” en un cuadro de texto?

6 minutos de lectura

Avatar de usuario de Ben
ben

Así que el código que tengo hasta ahora es:

<fieldset id="LinkList">
    <input type="text" id="addLinks" name="addLinks" value="http://">
    <input type="button" id="linkadd" name="linkadd" value="add">
</fieldset>

no esta en un <form> y es tal como es dentro de un <div>. Sin embargo, cuando escribo algo en el textbox llamado “addLinks” Quiero que el usuario pueda presionar Enter y activar el “linkadd” button que luego ejecutará una función de JavaScript.
¿Cómo puedo hacer esto?
Gracias

Editar:
Encontré este código, pero no parece funcionar.

$("#addLinks").keyup(function(event){
    if(event.keyCode == 13){
        $("#linkadd").click();
    }
});

  • unirse a keypress y busca e.charCode==13 (botón entrar).

    – Brad Christie

    18/10/2012 a las 12:56

  • ¿Ha agregado la referencia de la biblioteca jquery antes de usar el código anterior?

    – Milind Anantwar

    18 de octubre de 2012 a las 13:02

  • Sí, hice referencia a la biblioteca, no estoy seguro de por qué no funcionaba, pero ahora está bien. Gracias

    – ben

    18/10/2012 a las 13:25

  • Sí, como mencionó @BradChristie, keypress o keydown mencionados en esta respuesta son el camino a seguir.

    – metakermit

    9 de julio de 2015 a las 14:37

$(document).ready(function(){
    $('#TextBoxId').keypress(function(e){
      if(e.keyCode==13)
      $('#linkadd').click();
    });
});

  • agregar ‘devolver falso’ después del evento de clic también es útil, para evitar una entrada predeterminada, presione otros botones en la página

    – deudas

    03/03/2015 a las 19:45

  • La respuesta de dmitry_romanov es mejor porque es html puro.

    – McKay

    26 de junio de 2015 a las 12:40

  • @McKay, no, no lo es. Los botones se pueden usar para cosas además de formularios. De hecho, la pregunta del OP no está explícitamente en forma.

    – Dan

    02/08/2015 a las 18:39

  • @deebs tiene razón, no estoy seguro de lo que hice ese día, pero debo haber tenido un pedo cerebral.

    – Tim en MastersAllen

    18 de mayo de 2016 a las 8:26

  • ADVERTENCIA Está en desuso actualmente.

    – Константин Ван

    22 de agosto de 2017 a las 0:56

Avatar de usuario de Константин Ван
Константин Ван

Es, sí, 2021. Y creo que esto sigue siendo cierto.


NO UTILICE keypress

  1. keypress el evento es no activado cuando el usuario presiona una clave que no produce ningún caráctertal como Pestaña, Bloq Mayús, Borrar, Retroceso, Escaparizquierda derecha Cambioteclas de función(F1F12).

keypress evento Red de desarrolladores de Mozilla

Él keypress El evento se dispara cuando una tecla está presionadoy esa tecla normalmente produce un valor de carácter. Usar input en cambio.

  1. Ha sido obsoleto.

keypress evento Eventos de IU (Borrador de trabajo del W3C publicado el 8 de noviembre de 2018).

  • NOTA | Él keypress evento se asocia tradicionalmente con detectando un valor de carácter en lugar de una clave físicay es posible que no esté disponible en todas las teclas en algunas configuraciones.
  • ADVERTENCIA | Él keypress tipo de evento se define en esta especificación para referencia y exhaustividad, pero esta especificación desaprueba el uso de este tipo de evento. En contextos de edición, los autores pueden suscribirse a la beforeinput evento en su lugar.

NO UTILICE KeyboardEvent.keyCode

  1. Ha sido obsoleto.

KeyboardEvent.keyCode Red de desarrolladores de Mozilla

Obsoleto | Esta función ya no se recomienda. Aunque es posible que algunos navegadores aún lo admitan, es posible que ya se haya eliminado de los estándares web relevantes, que esté en proceso de eliminación o que solo se conserve por motivos de compatibilidad. Evite usarlo y actualice el código existente si es posible; ver la tabla de compatibilidad en la parte inferior de esta página para guiar su decisión. Tenga en cuenta que esta función puede dejar de funcionar en cualquier momento.


¿Qué debo usar entonces? (La buena práctica)

// Make sure this code gets executed after the DOM is loaded.
document.querySelector("#addLinks").addEventListener("keyup", event => {
    if(event.key !== "Enter") return; // Use `.key` instead.
    document.querySelector("#linkadd").click(); // Things you want to do.
    event.preventDefault(); // No need to `return false;`.
});

  • qué tal si: if (event.key == "Enter") { document.querySelector("#linkadd").click(); } ?

    – Anupam

    29 de julio de 2019 a las 7:41


  • Tenga en cuenta que .key no es compatible con todos los navegadores: caniuse.com/#feat=keyboardevent-key – alrededor del 10% de las personas usan navegadores que no lo admiten.

    – Martín Tournoij

    31 de julio de 2019 a las 15:27

  • @Anupam Bien, si cree que no tiene que evitar el controlador de eventos predeterminado del navegador webque, en este caso (keyup), probablemente no existe.

    – Константин Ван

    20 de noviembre de 2020 a las 3:55


  • @MartinTournoij Bueno, no te preocupes por eso. Los que no saben qué .key es super menor (menos del 3%) ahora.

    – Константин Ван

    20 de noviembre de 2020 a las 4:02

  • Así que todavía no hay una buena manera de hacer esto con HTML. En los días de VB6, había dos propiedades en los botones: “Cancelar” y “Predeterminado”. Si el botón tenía Cancelar = Verdadero, al presionar escape se activaba el botón. Si “Predeterminado” era verdadero, ingrese o regrese activó el botón. Supongo que podría usar JS usando una clase o dos. Espero que W3C lea esto 🙁

    – Enigma Plus

    16 de febrero de 2021 a las 19:45

Hay una solución libre de js.

Colocar type=submit al botón que le gustaría que fuera predeterminado y type=button a otros botones. Ahora, en el formulario a continuación, puede presionar Enter en cualquier campo de entrada, y el Render funcionará (a pesar de que es el segundo botón del formulario).

Ejemplo:

    <button id='close_renderer_button' class="btn btn-success"
            title="Перейти к редактированию программы"
            type=button>
      <span class="glyphicon glyphicon-edit"> </span> Edit program
    </button>
    <button id='render_button' class="btn btn-primary"
            title="Построить фрактал"
            type=submit
            formaction='javascript:alert("Bingo!");'>
      <span class="glyphicon glyphicon-send"> </span> Render
    </button>

Probado en FF24 y Chrome 35 (formaction es la función html5, pero type no es).

  • solo funciona si está dentro de un formulario, el OP no está usando un formulario

    – Andrés

    16 de julio de 2015 a las 15:27

  • @Andrew Sí, me lo perdí. Ahora puedo verlo claramente, gracias.

    – dmitry_romanov

    16 de julio de 2015 a las 15:38


  • @Andrew, cierto, pero en la mayoría de los casos es trivial envolverlo en una forma de no hacer nada…

    – Esteban Chung

    2 de agosto de 2016 a las 13:06

  • Además, esta solución funciona en el teclado virtual de iOS [Go] botón cuya acción por defecto es enviar.

    – Elemental

    22 de marzo de 2017 a las 13:53

  • Si lo envuelve en un formulario sin acción, no funcionará en Firefox ya que el envío activa una recarga de página. Pude resolver ese problema usando la solución de stackoverflow.com/a/13118834/12440938 (action="javascript:void(0);")

    – gabriel

    9 abr 2021 a las 19:20


  1. Reemplace la button con un submit
  2. Ser progresivoasegúrese de tener una versión del lado del servidor
  3. Enlace su JavaScript a la submit controlador del formulario, no el click manejador del boton

Al presionar Intro en el campo, se activará el envío del formulario y se activará el controlador de envío.

Podría agregar un controlador de eventos a su entrada así:

document.getElementById('addLinks').onkeypress=function(e){
    if(e.keyCode==13){
        document.getElementById('linkadd').click();
    }
}

Avatar de usuario de Sud
Sud

Funciona cuando el tipo de entrada = “botón” se reemplaza con el tipo de entrada = “enviar” para el botón predeterminado que debe activarse.

Avatar de usuario de Milind Anantwar
milind anantwar

En primer lugar, agregue el archivo de la biblioteca jquery jquery y llámalo en tu cabecera html.

y luego Usar código basado en jquery…

$("#id_of_textbox").keyup(function(event){
    if(event.keyCode == 13){
        $("#id_of_button").click();
    }
});

¿Ha sido útil esta solución?