Activar un clic en un botón 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 utilizar JavaScript para desencadenar el evento de clic del botón cuando el Ingresar ¿Se presiona la tecla 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 convertir el botón en un botón de envío.Y yo solo quiero el Ingresar 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();" />

Answer 1

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 2

¡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();"
/>

Answer 3

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 4

Convierta el botón en 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 Enter siempre debe llamar al botón de envío en un formulario.

Answer 5

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

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

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 esté fuera de un <form> porque cuando incluí estos elementos en ellos, al presionar Entrar, se envió el formulario y se volvió a cargar la página. Me llevó unos pocos parpadeos descubrirlo.

     

    

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

  

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 pensé en dar algo en JavaScript simple también.

Answer 7

Un truco básico que puedes usar para esto que no he visto completamente mencionado. Si desea realizar una acción ajax u 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 acción = " javascript: void (0); " como este es un atajo para prevenir esencialmente el comportamiento predeterminado. En este caso, se llama a un método si presiona enter o hace clic en el botón y se realiza una llamada ajax para cargar algunos datos.

Answer 8

Pruébelo:

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

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 10

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

Esto es 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 JavaScript antiguo.

Answer 11

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

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

Answer 12

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

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 han sido inyectados con la funcionalidad del botón, pero esta es otra historia ...

Answer 13

En Angular2 :

(keyup.enter)="doSomething()"

Si no desea comentarios visuales 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 de separación NG2 entre la vista y el modelo.

Answer 14

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

Esta es una forma sin javascript de atajos de teclado.

Los accesos directos de atributos de la tecla de acceso en MDN

Destinado a ser utilizado de esta manera. El atributo html en sí mismo es suficiente, sin embargo, podemos cambiar el marcador de posición u otro indicador dependiendo del navegador y el sistema operativo. El guión es un enfoque scratch 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 15

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

Documentos de Mozilla

Navegadores compatibles

Answer 16

Este onchange está cerca, pero se comporta mal con respecto al navegador y luego hacia adelante (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 17

En este caso, también desea deshabilitar el botón Intro de Publicar en el 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 18

event.returnValue = false

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

Funciona en Internet Explorer y Opera al menos.

Answer 19

Para jquery mobile tuve que hacer

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

Answer 20

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

  

NOTA: Esto es para " navegadores modernos " ;, incluido IE9 +. La versión IE8 no es mucho más complicada y 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://stackoverflow.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 21

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

Aquí están 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 Enter. Estoy haciendo esto en JS. Intenté un par de sugerencias, pero tuve problemas. Esto funciona bien.

Answer 22

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 23

En Javascript moderno, no obsoleto (sin keyCode o onkeydown) Javascript:

<input onkeypress="if(event.key == 'Enter') {console.log('Test')}">

Answer 24

Para aquellos a quienes les guste la brevedad y el enfoque moderno de js.

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

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

Answer 25

En jQuery, puede 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 26

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.