Eu tenho uma entrada de texto e um botão (veja abaixo). Como posso usar JavaScript para acionar o evento de clique do botão quando a Entertecla é pressionada dentro da caixa de texto?

Já existe um botão de envio diferente na minha página atual, então não posso simplesmente transformar o botão em um botão de envio. E eu só quero que a Entertecla clique nesse botão específico se for pressionada nessa caixa de texto e nada mais.

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

No jQuery, o seguinte funcionaria:

$("#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>

Ou em JavaScript simples, o seguinte funcionaria:

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>

Em seguida, basta codificá-lo!

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

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

Descobri isso:

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

Torne o botão um elemento de envio, para que seja automático.

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

Observe que você precisará de um <form> elemento contendo os campos de entrada para fazer esse trabalho (obrigado Sergey Ilinsky).

Não é uma boa prática redefinir o comportamento padrão; a Enterchave sempre deve chamar o botão enviar em um formulário.

Como ninguém usou addEventListenerainda, aqui está minha versão. Dados os elementos:

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

Eu usaria o seguinte:

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

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

Isso permite alterar o tipo e a ação do evento separadamente, mantendo o HTML limpo.

Observe que provavelmente vale a pena garantir que isso esteja fora de um <form>porque, quando coloquei esses elementos neles, pressionar Enter enviou o formulário e recarregou a página. Levei alguns segundos para descobrir.

Adendo : Graças a um comentário de @ruffin, adicionamos o manipulador de eventos ausente e um preventDefaultpara permitir que esse código (presumivelmente) funcione também dentro de um formulário. (Vou tentar testar isso, quando removerei o conteúdo entre colchetes.)

Em JavaScript simples,

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

Notei que a resposta é dada apenas no jQuery, então pensei em fornecer algo em JavaScript simples também.

Um truque básico que você pode usar para isso que eu não vi completamente mencionado. Se você deseja executar uma ação ajax ou algum outro trabalho sobre Enter, mas não deseja realmente enviar um formulário, é possível:

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

Definindo ação = "javascript: void (0);" como este é um atalho para impedir essencialmente o comportamento padrão. Nesse caso, um método é chamado se você pressionar enter ou clicar no botão e uma chamada ajax será feita para carregar alguns dados.

Tente:

<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 acionar uma pesquisa sempre que a tecla Enter for pressionada, use o seguinte:

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

Isso é apenas algo que eu tenho de um projeto um tanto recente ... Encontrei na net e não faço ideia se existe uma maneira melhor ou não no JavaScript antigo.

Use keypresse event.key === "Enter"com o JS moderno!

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

Documentos do Mozilla

Navegadores suportados

Embora eu tenha certeza de que, enquanto houver apenas um campo no formulário e um botão de envio, pressionar Enter deve enviar o formulário, mesmo se houver outro formulário na página.

Em seguida, você pode capturar o formulário no envio com js e fazer a validação ou retorno de chamada que desejar.

Ninguém notou o atributo html "accesskey", que está disponível há algum tempo.

Esta é uma maneira sem javascript de atalhos de teclado.

A tecla de acesso atribui atalhos no MDN

Destinado a ser usado assim. O atributo html em si é suficiente, mas podemos mudar o espaço reservado ou outro indicador, dependendo do navegador e do sistema operacional. O script é uma abordagem de rascunho não testada para dar uma idéia. Você pode querer usar um detector de biblioteca de navegador como o pequeno 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 é uma solução para todos os amantes de YUI por aí:

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

Nesse caso especial, obtive melhores resultados usando o YUI para acionar objetos DOM que foram injetados com a funcionalidade do botão - mas essa é outra história ...

Em Angular2 :

(keyup.enter)="doSomething()"

Se você não deseja um feedback visual no botão, é um bom design não fazer referência ao botão, mas sim invocar diretamente o controlador.

Além disso, o ID não é necessário - outra maneira de separar o NG2 entre a visualização e o modelo.

Nesse caso, você também deseja ativar o botão enter de Postagem no servidor e executar o 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();" />

Essa tentativa de troca está próxima, mas se comporta mal em relação ao navegador na época (no Safari 4.0.5 e Firefox 3.6.3), portanto, no final das contas, eu não recomendaria.

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

event.returnValue = false

Use-o ao manipular o evento ou na função que seu manipulador de eventos chama.

Funciona pelo menos no Internet Explorer e Opera.

Para jquery mobile eu tive que fazer

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

Para adicionar uma solução de JavaScript completamente claro que dirigiu @ questão de icedwater com o envio do formulário , aqui está uma solução completa comform .

NOTA: Isso é para "navegadores modernos", incluindo o IE9 +. A versão do IE8 não é muito mais complicada e pode ser aprendida aqui .

Violino: 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 />";
            }
        });
    }
});

No Javascript moderno e sem reprovação (sem keyCodeou 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();
    }
};

Heres meus dois centavos. Estou trabalhando em um aplicativo para Windows 8 e quero que o botão registre um evento de clique quando pressiono o botão Enter. Eu estou fazendo isso em JS. Tentei algumas sugestões, mas tive problemas. Isso funciona muito bem.

Para fazer isso com o jQuery:

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

Para fazer isso com JavaScript normal:

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

Para quem gosta de brevidade e abordagem js moderna.

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

onde input é uma variável que contém seu elemento de entrada.

Para JS moderno keyCodeestá obsoleta, utilize keyvez

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

No jQuery, você pode usar event.which==13. Se você tiver um form, poderá usar $('#formid').submit()(com os ouvintes de eventos corretos adicionados ao envio do referido formulário).

$('#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>

Eu desenvolvi javascript personalizado para alcançar esse recurso, apenas adicionando classe

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

Aqui Confira o Fiddle
- ou -
confira o exemplo em execução https://stackoverflow.com/a/58010042/6631280

Nota: na lógica atual, você precisa pressionar Ctrl+ Enter

Isso também pode ajudar, uma pequena função JavaScript, que funciona bem:

<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)" />

Sei que esta questão está resolvida, mas acabei de encontrar algo que pode ser útil para outras pessoas.