660 votos

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

Tengo una entrada de texto y un botón (ver más abajo). ¿Cómo puedo usar JavaScript para desencadenar el evento click del botón cuando el Escriba se pulsa la tecla en el cuadro de texto?

Ya existe un diferente botón de enviar en mi página actual, así que no puedo simplemente hacer que el botón el botón de enviar. Y, yo sólo quiero el Introducir clave, haga clic en este botón si se presiona desde dentro de este cuadro de texto, nada más.

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

Actualización: La aceptación de la propia respuesta es que ahora se permite, pero el jQuery solución es probablemente mejor. Si usted no tiene acceso a jQuery, por alguna razón, ver a mi propia respuesta a continuación.

828voto

Steve Paulo Puntos 8263

En jQuery, esto podría funcionar:

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

Lo siento, no sé cómo hacerlo en la llanura de JavaScript, pero tal vez alguien podría extrapolar esto a cabo?

PD: uso de jQuery ;)

281voto

Sergey Ilinsky Puntos 16803

A continuación, sólo código.

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

136voto

kdenney Puntos 3486

Di cuenta de esto:

    <input type="text" id="txtSearch" onkeypress="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
        if (typeof e == 'undefined' && window.event) { e = window.event; }
        if (e.keyCode == 13)
        {
            document.getElementById('btnSearch').click();
        }
    }
    </script>

52voto

albertein Puntos 10821

Hacer que el botón de enviar elemento, por lo que será automática.

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

Tenga en cuenta que tendrá un <form> elemento que contiene los campos de entrada para hacer este trabajo (gracias Sergey Ilinsky).

No es una buena práctica para redefinir el estándar de comportamiento, el Introducir la clave debe llamar siempre el botón de enviar en un formulario.

41voto

Varun Puntos 1535

En la llanura de JavaScript,

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

Me di cuenta de que la respuesta se da en jQuery solo, así que pensé en darle algo en la llanura de JavaScript así.

Iteramos.com

Iteramos es una comunidad de desarrolladores que busca expandir el conocimiento de la programación mas allá del inglés.
Tenemos una gran cantidad de contenido, y también puedes hacer tus propias preguntas o resolver las de los demás.

Powered by: