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 Enterse 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 hacer que el botón sea un botón de envío. Y, solo quiero que la Entertecla 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();" />

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>

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

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>

Haga que el botón sea 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 <form> elemento 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 Enterclave siempre debe llamar al botón de envío en un formulario.

Como nadie lo ha usado addEventListenertodaví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 esté fuera de un <form>porque cuando incluí estos elementos en ellos presionando Entrar, envió el formulario y volvió a cargar la página. Me llevó unos pocos parpadeos descubrir.

Anexo : Gracias a un comentario de @ruffin, agregué el controlador de eventos que falta y un preventDefaultpara 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).

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.

Un truco básico que puedes usar para esto que no he visto completamente mencionado. 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 action = "javascript: void (0);" como este es un acceso directo 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.

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>

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

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 si hay una mejor manera o no en JavaScript antiguo.

Uso keypressy 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 Soportados

Sin embargo, estoy bastante seguro de que, siempre y cuando solo haya 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.

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

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

Esta es una forma sin javascript de atajos de teclado.

La tecla de acceso atribuye accesos directos en MDN

Con la intención de ser utilizado así. 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 de 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", "ALT+SHIFT+Z");
} else if (isWin) {
   input.setAttribute("placeholder", "ALT+Z");
} else if (isMac) {
  input.setAttribute("placeholder", "CTRL+ALT+Z");
} else if (isOpera) {
  input.setAttribute("placeholder", "SHIFT+ESCAPE->Z");
} else {'Point me to operate...'}

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

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

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.

En este caso, también desea marcar el botón Intro desde 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();" />

Este onchange intento Pero se comporta mal con respecto al navegador en ese entonces 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();" />

event.returnValue = false

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

Funciona en Internet Explorer y Opera al menos.

Para jquery mobile tuve que hacer

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

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

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

Violín: 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 />";
            }
        });
    }
});

En Javascript moderno, no obsoleto (sin keyCodeo onkeydown):

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

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.

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

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

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

donde input es una variable que contiene su elemento input.

Para JS moderno keyCodeestá en desuso, use keyen su lugar

searchInput.onkeyup = function (e) {
    if (e.key === 'Enter') {
        searchBtn.click();
    }
}

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>

He desarrollado JavaScript personalizado para lograr esta característica simplemente agregando clase

Ejemplo: <button type="button" class="ctrl-p">Custom Print</button>

Aquí compruébelo Fiddle
- o -
consulte el ejemplo de ejecución https://stackoverflow.com/a/58010042/6631280

Nota: en la lógica actual, debe presionar Ctrl+ Enter

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.