Como acionar o botão HTML quando você pressiona Enter na caixa de texto?

106

Portanto, o código que tenho até agora é:

<fieldset id="LinkList">
    <input type="text" id="addLinks" name="addLinks" value="http://">
    <input type="button" id="linkadd" name="linkadd" value="add">
</fieldset>

Não está em a <form>e é exatamente como está em a <div>. No entanto, quando eu digito algo no textboxchamado "addLinks", quero que o usuário possa pressionar Enter e acionar o "linkadd", buttonque executará uma função JavaScript.
Como posso fazer isso?
obrigado

Edit: encontrei este código, mas não parece funcionar.

$("#addLinks").keyup(function(event){
    if(event.keyCode == 13){
        $("#linkadd").click();
    }
});
Ben
fonte
3
vincular keypresse verificar e.charCode==13(botão entrar).
Brad Christie
Você adicionou a referência da biblioteca jquery antes de usar o código acima?
Milind Anantwar
Sim, fiz referência à biblioteca, não sei por que não estava funcionando, mas agora está tudo bem. Obrigado
Ben,
Sim, como @BradChristie mencionou, keypressou keydownmencionou nesta resposta são o caminho a percorrer.
metakermit

Respostas:

117
$(document).ready(function(){
    $('#TextBoxId').keypress(function(e){
      if(e.keyCode==13)
      $('#linkadd').click();
    });
});
Man Programmer
fonte
5
adicionar 'return false' após o evento de clique também é útil, para evitar um pressionamento de Enter padrão em outros botões na página
deebs
A resposta de dmitry_romanov é melhor porque é html puro.
McKay
6
@McKay, não, não é. Os botões podem ser usados ​​para outras coisas além de formulários. Na verdade, a pergunta do OP não está explicitamente em uma forma.
Dan
2
@deeb tem toda a razão, não tenho certeza do que fiz no dia, mas devo ter tido um peido cerebral.
Tim em MastersAllen
5
AVISO Atualmente, ele está obsoleto .
Константин Ван
77

É …… 2020. E eu acredito que isso ainda é verdade.


NÃO USE keypress

  1. keypressevento é não acionado quando o usuário pressiona uma tecla que não produz qualquer personagem , como Tab, Caps Lock, Delete, Backspace, Escape, esquerda e direita Shift, teclas de função ( F1- F12).

    keypressevento Mozilla Developer Network

    O keypressevento é disparado quando uma tecla é pressionada e essa tecla normalmente produz um valor de caractere . Use em seu inputlugar.

  2. Foi descontinuado.

    keypressEventos de IU do evento (rascunho de trabalho do W3C publicado em 8 de novembro de 2018.)

    • NOTA | O keypressevento é tradicionalmente associado à detecção de um valor de caractere em vez de uma chave física e pode não estar disponível em todas as chaves em algumas configurações.
    • AVISO | O keypresstipo de evento é definido nesta especificação para referência e integridade, mas esta especificação descarta o uso deste tipo de evento. Quando em contextos de edição, os autores podem se inscrever no beforeinputevento.

NÃO USE KeyboardEvent.keyCode

  1. Foi descontinuado.

    KeyboardEvent.keyCode Mozilla Developer Network

    Obsoleto | Este recurso não é mais recomendado. Embora alguns navegadores ainda possam suportá-lo, ele pode já ter sido removido dos padrões da web relevantes, pode estar em processo de exclusão ou pode ser mantido apenas para fins de compatibilidade. Evite usá-lo e atualize o código existente, se possível; consulte a tabela de compatibilidade na parte inferior desta página para orientar sua decisão. Esteja ciente de que esse recurso pode parar de funcionar a qualquer momento.


O que devo usar então? (A boa prática)

// Make sure this code gets executed after the DOM is loaded.
document.querySelector("#addLinks").addEventListener("keyup", event => {
    if(event.key !== "Enter") return; // Use `.key` instead.
    document.querySelector("#linkadd").click(); // Things you want to do.
    event.preventDefault(); // No need to `return false;`.
});
Константин Ван
fonte
que tal if (event.key == "Enter") { document.querySelector("#linkadd").click(); } :?
Anupam
2
Observe que .keynão é compatível com todos os navegadores: caniuse.com/#feat=keyboardevent-key - cerca de 10% das pessoas usam navegadores que não o suportam.
Martin Tournoij
72

Existe uma solução livre de js.

Defina type=submito botão que você deseja que seja o padrão e type=buttonoutros botões. Agora, no formulário abaixo, você pode clicar em Enter em qualquer campo de entrada e o Renderbotão funcionará (apesar de ser o segundo botão do formulário).

Exemplo:

    <button id='close_renderer_button' class='btn btn-success'
            title='Перейти к редактированию программы'
            type=button>
      <span class='glyphicon glyphicon-edit'> </span> Edit program
    </button>
    <button id='render_button' class='btn btn-primary'
            title='Построить фрактал'
            type=submit
            formaction='javascript:alert("Bingo!");'>
      <span class='glyphicon glyphicon-send'> </span> Render
    </button>

Testado em FF24 e Chrome 35 ( formactioné um recurso html5, mas typenão é).

dmitry_romanov
fonte
17
só funciona se você estiver em um formulário, o OP não está usando um formulário
André
@Andrew Sim, eu perdi isso. Agora posso ver claramente, obrigado.
dmitry_romanov
4
@Andrew, é verdade, mas é trivial na maioria dos casos envolvê-lo em uma forma de não fazer nada ...
Stephen Chung
2
Além disso, esta solução funciona no botão [Go] do teclado virtual iOS cuja ação padrão é enviar.
Elemental
10
  1. Substitua o buttonpor umsubmit
  2. Seja progressivo , certifique-se de ter uma versão do lado do servidor
  3. Vincule seu JavaScript ao submitmanipulador do formulário, não ao clickmanipulador do botão

Pressionar enter no campo acionará o envio do formulário e o manipulador de envio será acionado.

Quentin
fonte
6

Você pode adicionar um manipulador de eventos à sua entrada, assim:

document.getElementById('addLinks').onkeypress=function(e){
    if(e.keyCode==13){
        document.getElementById('linkadd').click();
    }
}
Asad Saeeduddin
fonte
2

Funciona quando input type = "button" é substituído por input type = "submit" para o botão padrão que precisa ser acionado.

Sud
fonte
1

Em primeiro lugar, adicione o arquivo de biblioteca jquery jquery e chame-o em seu cabeçalho html.

e use o código baseado em jquery ...

$("#id_of_textbox").keyup(function(event){
    if(event.keyCode == 13){
        $("#id_of_button").click();
    }
});
Milind Anantwar
fonte
1

Isso deve bastar, estou usando jQuery, você pode escrever javascript simples.
Substitua sendMessage()pela sua funcionalidade.

$('#addLinks').keypress(function(e) {
    if (e.which == 13) {
        sendMessage();
        e.preventDefault();
    }
});
Anshu
fonte
1

Com base em algumas respostas anteriores, cheguei a esta conclusão:

<form>
  <button id='but' type='submit'>do not click me</button>
  <input type='text' placeholder='press enter'>
</form>

$('#but').click(function(e) {
  alert('button press');
  e.preventDefault();
});

Dê uma olhada no Fiddle

EDITAR: Se você não quiser adicionar elementos html adicionais, você pode fazer isso apenas com JS:

    $("input").keyup(function(event) {
        if (event.keyCode === 13) {
            $("button").click();
        }
    });     
Pablo Werlang
fonte
0

Encontrei o howto do w3schools.com, a página de teste deles está no seguinte.

https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_trigger_button_enter

Isso funcionou no meu navegador normal, mas não funcionou no meu aplicativo de php que usa o navegador de php embutido.

Depois de brincar um pouco, descobri a seguinte alternativa de JavaScript puro que funciona para minha situação e deve funcionar em todas as outras situações:

    function checkForEnterKey(){
        if (event.keyCode === 13) {
            event.preventDefault();
            document.getElementById("myBtn").click();
        }
    }

    function buttonClickEvent()
    {
        alert('The button has been clicked!');
    }

HTML Pressione a tecla Enter dentro da caixa de texto para ativar o botão.

    <br />
    <input id="myInput" onkeyup="checkForEnterKey(this.value)">
    <br />
    <button id="myBtn" onclick="buttonClickEvent()">Button</button>
Scott Tovey
fonte
-1
<input type="text" id="input_id" />    

$('#input_id').keydown(function (event) {
    if (event.keyCode == 13) { 
         // Call your function here or add code here
    }
});
Rishabh Jhalani
fonte
-2

Estou usando um botão de kendo. Isso funcionou para mim.

<div class="form-group" id="indexform">
    <div class="col-md-8">
            <div class="row">
                <b>Search By Customer Name/ Customer Number:</b>
                @Html.TextBox("txtSearchString", null, new { style = "width:400px" , autofocus = "autofocus" })
                @(Html.Kendo().Button()
                    .Name("btnSearch")
                    .HtmlAttributes(new { type = "button", @class = "k-primary" })
                    .Content("Search")
                    .Events(ev => ev.Click("onClick")))
            </div>
    </div>
</div>
<script>
var validator = $("#indexform").kendoValidator().data("kendoValidator"),
          status = $(".status");
$("#indexform").keyup(function (event) {
    if (event.keyCode == 13) {
        $("#btnSearch").click();
    }
});
</script>
corvair61
fonte