Ative um clique no botão com JavaScript na tecla Enter em uma caixa de texto

1293

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 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();" />
kdenney
fonte
1
Nota importante para novatos como eu: A parte principal desta pergunta é se você já possui um formulário na página e já possui um botão de envio. A resposta do jQuery é compatível com vários navegadores e é uma boa solução.
Joshua Dance
2
@ JoshuaDance, já ter um formulário / enviar não é um problema. Uma página pode ter muitos formulários (mas não aninhados), cada um com seu próprio envio. Cada campo de cada formulário acionará apenas o envio desse formulário. Como afirmado por esta resposta .
Frédéric

Respostas:

1426

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>

Steve Paulo
fonte
12
É provavelmente a melhor prática para consulta event.which que event.keyCode ou event.charCode, consulte developer.mozilla.org/en/DOM/event.charCode#Notes
William Niu
25
keydownNão keyupé o melhor evento para usar. Além disso, se você estiver usando o asp.net, será necessário return falseno final parar o asp.net de ainda interceptar o evento.
maxp
144
O problema do uso keydowné que manter pressionado enter disparará o evento repetidamente. se você se conectar ao keyupevento, ele será acionado apenas quando a chave for liberada.
Steve Paulo
26
Eu tenho mexido seu código adicionando event.preventDefault();antes de invocar click();a função enquanto a minha página tem um formulário e eu tenho mudado keyupcom keypresscomo era o manipulador trabalhando apenas para mim, de qualquer forma, obrigado por peça puro de código!
Adrian K.
7
Para ser justo, jQuery era praticamente sinônimo de JS quando esta resposta foi publicada. Mas agora muitos de nós que evitamos o jQuery por completo (porque é apenas um desperdício de kb quando você usa algo como React) nos sentimos irritados quando procuramos respostas para as perguntas do JS e, muitas vezes, a primeira coisa que surge é uma biblioteca que não usamos. não quero depender.
Andy
402

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();"
/>
Sergey Ilinsky
fonte
5
Sim, eu quase fiz isso. Eu acho que é apenas uma coisa de preferência pessoal ... Eu gosto da abordagem mais modular. ;)
kdenney
9
se você precisar interromper o envio do formulário: onkeydown = "if (event.keyCode == 13) {document.getElementById ('btnSubmit'). click (); event.returnValue = false; event.cancel = true;}"
Gabriel Chung
3
Isso funcionou para mim devido ao fato de que o método inline, em vez de chamar a função com código semelhante, permite retornar falso na chamada e evitar postback. No meu caso, o método "click" chama uma chamada assíncrona __doPostback e sem o "return false;" apenas recarregaria a página.
23412 Dave
3
Eu concordo com Sam, esse código com esse código JS embutido é feio como o inferno. Você sempre deve separar os códigos HTML e JavaScript.
Sk8erPeter
9
@ Sam Nunca obtenha sua sabedoria de fantoches . A dor leva ao medo , e o medo é o assassino da mente. Medo é a pequena morte que traz obliteração total. Eu irei enfrentar o meu medo. Permitirei que passe sobre mim e através de mim. E quando tiver passado, voltarei o olho interior para ver seu caminho. Para onde foi o medo, não haverá nada. Exceto, talvez, os manipuladores de eventos em linha. Portanto, sim, separe seus manipuladores de eventos da sua visualização / marcação, como esta resposta . ; ^)
ruffin
179

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>
kdenney
fonte
22
e = e || window.event; // maneira mais curta de obter um evento #
Victor Victor
2
Melhor opção simples de JavaScript. O JavaScript adicionado como um atributo no HTML consome espaço e o jQuery é apenas jQuery (a compatibilidade não é garantida). Obrigado pela solução!
boxspah
e se você retornar false dentro do if, poderá evitar que a chave seja processada ainda mais: <input type = "text" id = "txtSearch" onkeypress = "searchKeyPress (event);" /> <input type = "button" id = "btnSearch" Valor = "Pesquisa" onclick = "doSomething ();" /> função <script> searchKeyPress (e) {// procura por window.event caso o evento não seja passado em e = e || window.event; if (e.keyCode == 13) {document.getElementById ('btnSearch'). click (); retorna falso; } retornar verdadeiro; } </script>
Jose Gómez
83

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.

Albertein
fonte
30
Dudes! Leia a pergunta toda. Já existe outro botão de envio na página, então isso não funcionaria para ele.
skybondsor
5
De fato, recentemente tentei fazer isso no SharePoint. No entanto, o SharePoint já possui um formulário que envolve todo o seu conteúdo e quaisquer <form>tags são descartadas pelo analisador de HTML liberal. Então eu tenho que sequestrar pressionamentos de teclas ou falhar. (Aliás, Pressionar Enter no modo de lançamentos Editar SharePoint por algum motivo acho que a fita é usando a mesma forma..)
1
A <button type="submit" onclick="return doSomething(this)">Value</button>trabalha para. A pista está dentro da returnpalavra
Gus
77

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

água gelada
fonte
14
Realmente não entendo por que a resposta do JQeuery tem mais votos positivos. Eu choro pela comunidade de desenvolvimento da web.
David
1
Tudo o que realmente falta é um argumento em seu manipulador de teclas e um e.preventDefault()para fazê-lo funcionar com formulários. Veja minha (nova) resposta .
Ruffin
5
a menos que você não pretende que os usuários realmente digitar quaisquer dados, você deve realmente fazer algo assimif (event.keyCode == 13) { event.preventDefault(); go.click();}
unsynchronized
1
Usar o jQuery apenas para essa pequena coisa é certamente inútil. Também funciona muito facilmente com o CSP e leva menos tempo para carregar. Se puder, use isso.
Avamander
59

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.

Varun
fonte
20
document.layers? Você ainda apoia o Netscape ?!
Victor Victor
6
Não, você não precisa dar suporte ao Netscape. blog.netscape.com/2007/12/28/…
kingdango
7
O netscape.com nem existe mais (ele é redirecionado para aol.com) e ainda existem pessoas suportando o nescape, incrível.
precisa saber é
6
evt.which ? evt.which : evt.keyCodeé igual aevt.which || evt.keyCode
user
3
@LeartS Aposto que é porque ainda existem pessoas usando o Netscape.
SantiBailors
23

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.

Switters
fonte
Esta é uma solução melhor para suporte a dispositivos móveis. Ele oculta automaticamente o teclado nos dispositivos Android e também no iOS, se você adicionar searchCriteria.blur();ao onsubmit.
Aaron Gillion
Isso não funcionará, pois já existe outro botão de envio na página.
Jose Gómez
@ JoseGómez, uma página pode ter tantos botões de envio quanto o desenvolvedor desejar, sendo acionada apenas pelos campos correspondentes. Só é preciso ter formulários distintos para cada grupo de campos / envio. Uma página não está limitada a um único formulário.
Frédéric
@ Frederic: a partir da pergunta, eu (mis?) Entendi que o outro botão de envio estava na mesma forma: "Já existe um botão de envio diferente na minha página atual, então não posso simplesmente fazer do botão um botão de envio".
Jose Gómez
1
Essa é uma ótima resposta, pois permite ações personalizadas e evita a necessidade de um monte de códigos de substituição sofisticados.
Beejor 19/08/16
16

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>
mahbub_siddique
fonte
15

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();
    }
}
significar
fonte
14
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.

Max Schmeling
fonte
14

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

Gibolt
fonte
13

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.

garrow
fonte
13

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

Esta é uma maneira sem javascript de atalhos de teclado.

accesskey_browsers

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>

NVRM
fonte
1
O acesso tem dois s.
Kaiser #
3
Não parece responder à pergunta do OP em todo o caso especial de = tecla Enter
Ozan Bellik
12

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

frhd
fonte
12

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.

AlikElzin-kilaka
fonte
1
Aqui está uma pergunta sobre mais informações sobre as opções de
keyup
10

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();" />
njoshsn
fonte
9

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();" />
Beldaz
fonte
Também deve mencionar que desencadeia ao desfocar.
FluorescentGreen5
8
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.

ELEK
fonte
8

Para jquery mobile eu tive que fazer

$('#id_of_textbox').live("keyup", function(event) {
    if(event.keyCode == '13'){
    $('#id_of_button').click();
    }
});
user1071182
fonte
2
.livefoi descontinuado no jQuery 1.7. Ainda é considerado bom no jQuery Mobile?
Barmar 30/10/12
8

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 />";
            }
        });
    }
});
ruffin
fonte
1
Votos negativos sem explicações dificultam o tratamento de suas preocupações. Deixe-me saber o que não parece certo, e eu ficaria feliz em acompanhar.
Ruffin
7

No Javascript moderno e sem reprovação (sem keyCodeou onkeydown):

<input onkeypress="if(event.key == 'Enter') {console.log('Test')}">
MCCCS
fonte
Esta é na minha opinião a resposta mais simples que faz o trabalho. No meu caso de uso, atualizei para onkeypress = "inputKeyPressed (event)" e, em seguida, manipulei o parâmetro event.which na própria função. A tecla Enter, por exemplo, retorna o event.which como 13.
ak93
5
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.

Tequilaman
fonte
Tipo de exagero para colocar o manipulador de eventos no documento. Se você tinha um charCodedos 13 em qualquer outro lugar, está disparando printResult().
Ruffin
5

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();
    }
});
isca de clique
fonte
5

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.

Alexandr Tsyganok
fonte
1

Para JS moderno keyCodeestá obsoleta, utilize keyvez

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

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>

hev1
fonte
0

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

Ravi Makwana
fonte
-4

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.

Niraj Chauhan
fonte
5
A questão era acionar um clique no botão com a tecla Enter em uma caixa de texto. Sua solução é para um tipo de funcionalidade "marca d'água".
kdenney