Pregunta Desencadenar un clic de botón con JavaScript en la tecla Intro en un cuadro de texto


Tengo una entrada de texto y un botón (ver a continuación). ¿Cómo puedo usar JavaScript para desencadenar el evento de clic del botón cuando el Entrar la tecla se presiona dentro del cuadro de texto?

Ya hay un botón de envío diferente en mi página actual, por lo que no puedo simplemente hacer que el botón sea enviado. Y yo solamente querer el Entrar tecla para hacer clic en este botón específico 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();" />

1099
2017-09-30 21:32


origen


Respuestas:


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, 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>


1284
2017-09-30 21:52



¡Entonces solo codifícalo!

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

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

359
2017-09-30 21:56



Me di cuenta de 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>

165
2017-09-30 21:52



Haga que el botón sea un elemento de envío, por lo que será automático.

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

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

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


75
2017-09-30 21:33



Como nadie ha usado addEventListener sin embargo, aquí está mi versión. Teniendo en cuenta 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 el HTML limpio.

Nota que probablemente valga la pena asegurarse de que esto esté fuera de <form> porque cuando encerré estos elementos en ellos presionando Enter, envié el formulario y volví a cargar la página. Me tomó un par de parpadeos para descubrir.

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


67
2017-11-19 05:37



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

Me di cuenta de que la respuesta solo está en jQuery, así que pensé en dar algo en JavaScript simple también.


55
2018-02-08 04:49



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

<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 action = "javascript: void (0);" como este es un atajo para prevenir el comportamiento predeterminado esencialmente. En este caso, se llama un método si presiona enter o hace clic en el botón y se realiza una llamada ajax para cargar algunos datos.


19
2017-09-12 19:27



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>

13
2018-03-02 08:04