presionar - leer tecla enter con javascript

Activar un botón, haga clic con JavaScript en la tecla Intro en un cuadro de texto

Question

Tengo una entrada de texto y un botón (ver más abajo). ¿Cómo puedo usar JavaScript para activar el evento de clic del botón cuando se presiona la tecla Intro dentro del cuadro de texto?

Ya hay un botón de envío diferente en mi página actual, así que no puedo simplemente hacer que el botón sea un botón de envío. Y, solo quiero que la tecla Intro haga clic en este botón específico si se presiona desde este cuadro de texto, nada más.

<input type="text" id="txtSearch" />
<input type="button" id="btnSearch" value="Search" onclick="doSomething();" />

Answer 1

Utilice keypress y event.key === "Enter" con JS moderno!

const textbox = document.getElementById("txtSearch");
textbox.addEventListener("keypress", function onEvent(event) {
    if (event.key === "Enter") {
        document.getElementById("btnSearch").click();
    }
});

Mozilla Docs

Navegadores compatibles

Answer 2

Aunque, estoy bastante seguro de que siempre que haya un solo campo en el formulario y un botón de envío, al presionar enter se debe enviar el formulario, incluso si hay otro formulario en la página.

A continuación, puede capturar el formulario onsubmit con js y hacer cualquier validación o devolución de llamada que desee.

Answer 3

Como nadie ha usado addEventListener todavía, aquí está mi versión. Dados los elementos:

<input type = "text" id = "txt" />
<input type = "button" id = "go" />

Yo usaría lo siguiente:

var go = document.getElementById("go");
var txt = document.getElementById("txt");

txt.addEventListener("keypress", function(event) {
    event.preventDefault();
    if (event.keyCode == 13)
        go.click();
});

Esto le permite cambiar el tipo de evento y la acción por separado mientras mantiene limpio el HTML.

Tenga en cuenta que probablemente valga la pena asegurarse de que esto se encuentre fuera de un <form> ya que cuando incluí estos elementos en ellos, al presionar Enter, se envió el formulario y se recargó la página. Me tomó unos parpadeos para descubrir.

Anexo : Gracias a un comentario de @ruffin, agregué el controlador de eventos faltante y un preventDefault para permitir que este código (presumiblemente) también funcione dentro de un formulario. (Comenzaré a probar esto, momento en el que eliminaré el contenido entre corchetes).

Answer 4

Descubrí esto:

<input type="text" id="txtSearch" onkeypress="return searchKeyPress(event);" />
<input type="button" id="btnSearch" Value="Search" onclick="doSomething();" />

<script>
function searchKeyPress(e)
{
    // look for window.event in case event isn''t passed in
    e = e || window.event;
    if (e.keyCode == 13)
    {
        document.getElementById(''btnSearch'').click();
        return false;
    }
    return true;
}
</script>

Answer 5

En Angular2 :

(keyup.enter)="doSomething()"

Si no desea una retroalimentación visual en el botón, es un buen diseño no hacer referencia al botón sino invocar directamente el controlador.

Además, la identificación no es necesaria, otra forma NG2 de separar entre la vista y el modelo.

Answer 6

En JavaScript simple,

if (document.layers) {
  document.captureEvents(Event.KEYDOWN);
}

document.onkeydown = function (evt) {
  var keyCode = evt ? (evt.which ? evt.which : evt.keyCode) : event.keyCode;
  if (keyCode == 13) {
    // For Enter.
    // Your function here.
  }
  if (keyCode == 27) {
    // For Escape.
    // Your function here.
  } else {
    return true;
  }
};

Noté que la respuesta se da solo en jQuery, así que también pensé en dar algo en JavaScript simple.

Answer 7

En jQuery, lo siguiente funcionaría:

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

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

$("#myButton").click(function() {
  alert("Button code executed.");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Username:<input id="username" type="text"><br>
Password:&nbsp;<input id="pw" type="password"><br>
<button id="myButton">Submit</button>

O en JavaScript simple, lo siguiente funcionaría:

document.getElementById("id_of_textbox")
    .addEventListener("keyup", function(event) {
    event.preventDefault();
    if (event.keyCode === 13) {
        document.getElementById("id_of_button").click();
    }
});

document.getElementById("pw")
    .addEventListener("keyup", function(event) {
    event.preventDefault();
    if (event.keyCode === 13) {
        document.getElementById("myButton").click();
    }
});

function buttonCode()
{
  alert("Button code executed.");
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Username:<input id="username" type="text"><br>
Password:&nbsp;<input id="pw" type="password"><br>
<button id="myButton" onclick="buttonCode()">Submit</button>

Answer 8

En jQuery, puedes usar event.which==13 . Si tiene un form , puede usar $(''#formid'').submit() (con los oyentes de eventos correctos agregados al envío de dicho formulario).

$(''#textfield'').keyup(function(event){
   if(event.which==13){
       $(''#submit'').click();
   }
});
$(''#submit'').click(function(e){
   if($(''#textfield'').val().trim().length){
      alert("Submitted!");
   } else {
    alert("Field can not be empty!");
   }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label for="textfield">
Enter Text:</label>
<input id="textfield" type="text">
<button id="submit">
Submit
</button>

Answer 9

Entonces simplemente codifíquelo!

<input type = "text"
       id = "txtSearch" 
       onkeydown = "if (event.keyCode == 13)
                        document.getElementById(''btnSearch'').click()"    
/>

<input type = "button"
       id = "btnSearch"
       value = "Search"
       onclick = "doSomething();"
/>

Answer 10

Esta es una solución para todos los amantes de YUI :

Y.on(''keydown'', function() {
  if(event.keyCode == 13){
    Y.one("#id_of_button").simulate("click");
  }
}, ''#id_of_textbox'');

En este caso especial obtuve mejores resultados al usar YUI para activar objetos DOM que fueron inyectados con la funcionalidad de botones, pero esta es otra historia ...

Answer 11

Este intento de cambio está cerca, pero se comporta mal con respecto al navegador anterior y posterior (en Safari 4.0.5 y Firefox 3.6.3), por lo que en última instancia, no lo recomendaría.

<input type="text" id="txtSearch" onchange="doSomething();" />
<input type="button" id="btnSearch" value="Search" onclick="doSomething();" />

Answer 12

Esto en caso de que desee también desactivar el botón de entrada de Publicación al servidor y ejecutar el script Js.

<input type="text" id="txtSearch" onkeydown="if (event.keyCode == 13)
 {document.getElementById(''btnSearch'').click(); return false;}"/>
<input type="button" id="btnSearch" value="Search" onclick="doSomething();" />

Answer 13

Esto también podría ayudar, una pequeña función de JavaScript, que funciona bien:

<script type="text/javascript">
function blank(a) { if(a.value == a.defaultValue) a.value = ""; }

function unblank(a) { if(a.value == "") a.value = a.defaultValue; }
</script> 
<input type="text" value="email goes here" onfocus="blank(this)" onblur="unblank(this)" />

Sé que esta pregunta está resuelta, pero acabo de encontrar algo que puede ser útil para otros.

Answer 14

Haz del botón un elemento de envío, para que sea automático.

<input type = "submit"
       id = "btnSearch"
       value = "Search"
       onclick = "return doSomething();"
/>

Tenga en cuenta que necesitará un elemento <form> que contenga los campos de entrada para que esto funcione (gracias Sergey Ilinsky).

No es una buena práctica redefinir el comportamiento estándar, la tecla Intro siempre debe llamar al botón enviar en un formulario.

Answer 15

Nadie notó el html attibute "accesskey" que está disponible desde hace un tiempo.

Esta es una forma no javascript para los atajos de teclado.

Los accesos directos atribuyen a los atajos en MDN

Intentado ser utilizado de esta manera. El atributo html en sí es suficiente, sin embargo, podemos cambiar el marcador de posición u otro indicador según el navegador y el sistema operativo. La secuencia de comandos es un enfoque de prueba no probado para dar una idea. Es posible que desee utilizar un detector de biblioteca del navegador como el pequeño bowser

let client = navigator.userAgent.toLowerCase();
    isLinux = client.indexOf("linux") > -1;
    isWin = client.indexOf("windows") > -1;
    isMac = client.indexOf("apple") > -1;
    isFirefox = client.indexOf("firefox") > -1;
    isWebkit = client.indexOf("webkit") > -1;
    isOpera = client.indexOf("opera") > -1;
    input = document.getElementById(''guestInput'');

if(isFirefox) {
   input.setAttribute("placeholder", "Access keys: ALT+SHIFT+Z");
} else if (isWin) {
   input.setAttribute("placeholder", "Access keys: ALT+Z");
} else if (isMac) {
  input.setAttribute("placeholder", "Access keys: CTRL+ALT+Z");
} else if (isOpera) {
  input.setAttribute("placeholder", "Shortcut: SHIFT+ESCAPE->Z");
} else {''Point me to operate...''}

<input type="text" id="guestInput" accesskey="z" placeholder="Acces shortcut:"></input>

Answer 16

Para activar una búsqueda cada vez que se presiona la tecla Intro, use esto:

$(document).keypress(function(event) {
    var keycode = (event.keyCode ? event.keyCode : event.which);
    if (keycode == ''13'') {
        $(''#btnSearch'').click();
    }
}

Answer 17

Para agregar una solución JavaScript completamente simple que solucione el problema de @ icedwater con el envío del formulario , aquí hay una solución completa con el form .

NOTA: Esto es para "navegadores modernos", incluido IE9 +. La versión de IE8 no es mucho más complicada, y se puede aprender aquí .

Fiddle: https://jsfiddle.net/rufwork/gm6h25th/1/

HTML

<body>
    <form>
        <input type="text" id="txt" />
        <input type="button" id="go" value="Click Me!" />
        <div id="outige"></div>
    </form>
</body>

JavaScript

// The document.addEventListener replicates $(document).ready() for
// modern browsers (including IE9+), and is slightly more robust than `onload`.
// More here: https://.com/a/21814964/1028230
document.addEventListener("DOMContentLoaded", function() {
    var go = document.getElementById("go"),
        txt = document.getElementById("txt"),
        outige = document.getElementById("outige");

    // Note that jQuery handles "empty" selections "for free".
    // Since we''re plain JavaScripting it, we need to make sure this DOM exists first.
    if (txt && go)    {
        txt.addEventListener("keypress", function (e) {
            if (event.keyCode === 13)   {
                go.click();
                e.preventDefault(); // <<< Most important missing piece from icedwater
            }
        });

        go.addEventListener("click", function () {
            if (outige) {
                outige.innerHTML += "Clicked!<br />";
            }
        });
    }
});

Answer 18

Para aquellos a los que les guste la brevedad y el enfoque moderno js.

input.addEventListener(''keydown'', (e) => {if (e.keyCode == 13) doSomething()});

donde entrada es una variable que contiene su elemento de entrada.

Answer 19

Para hacerlo con jQuery:

$("#txtSearch").on("keyup", function (event) {
    if (event.keyCode==13) {
        $("#btnSearch").get(0).click();
    }
});

Para hacerlo con JavaScript normal:

document.getElementById("txtSearch").addEventListener("keyup", function (event) {
    if (event.keyCode==13) { 
        document.getElementById("#btnSearch").click();
    }
});

Answer 20

Para jquery mobile tuve que hacer

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

Answer 21

Un truco básico que puedes usar para esto que no he visto mencionado completamente. Si desea realizar una acción ajax, o algún otro trabajo en Enter pero no desea enviar un formulario, puede hacerlo:

<form onsubmit="Search();" action="javascript:void(0);">
    <input type="text" id="searchCriteria" placeholder="Search Criteria"/>
    <input type="button" onclick="Search();" value="Search" id="searchBtn"/>
</form>

Configuración de la acción = "javascript: void (0);" así es un atajo para prevenir el comportamiento por defecto esencialmente. En este caso, se llama a un método si pulsa Intro o hace clic en el botón y se realiza una llamada ajax para cargar algunos datos.

Answer 22

Intentalo:

<input type="text" id="txtSearch"/>
<input type="button" id="btnSearch" Value="Search"/>

<script>             
   window.onload = function() {
     document.getElementById(''txtSearch'').onkeypress = function searchKeyPress(event) {
        if (event.keyCode == 13) {
            document.getElementById(''btnSearch'').click();
        }
    };

    document.getElementById(''btnSearch'').onclick =doSomething;
}
</script>

Answer 23

document.onkeypress = function (e) {
 e = e || window.event;
 var charCode = (typeof e.which == "number") ? e.which : e.keyCode;
 if (charCode == 13) {

        // Do something here
        printResult();
    }
};

Heres mis dos centavos. Estoy trabajando en una aplicación para Windows 8 y quiero que el botón registre un evento de clic cuando presiono el botón Intro. Estoy haciendo esto en JS. Intenté un par de sugerencias, pero tuve problemas. Esto funciona bien.

Answer 24

event.returnValue = false

Úselo cuando maneje el evento o en la función que llame su controlador de eventos.

Funciona en Internet Explorer y Opera al menos.

Answer 25

onkeydown="javascript:if (event.which || event.keyCode){if ((event.which == 13) || (event.keyCode == 13)) {document.getElementById(''btnSearch'').click();}};"

Esto es solo algo que tengo de un proyecto algo reciente ... Lo encontré en la red, y no tengo idea de si hay una mejor manera o no en el JavaScript antiguo.