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

Question

Eu tenho uma entrada de texto e um botão (veja abaixo). Como posso usar JavaScript para gatilho do evento Click do botão quando o Enter tecla for pressionada dentro da caixa de texto?

Já existe um diferente botão enviar na minha página atual, por isso não pode simplesmente fazer o botão de um botão de envio. E, eu única quer o Enter para clicar neste botão específico se ele é pressionado a partir desta caixa de um texto, nada mais.

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

Answer 1

Em jQuery, o seguinte iria funcionar:

$("#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 puro, o seguinte iria funcionar:

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

Em seguida, apenas o código-lo!

<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

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

Answer 4

Faça o botão um elemento apresentar, por isso vai ser automático.

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

Note que você vai precisar de um elemento <form> contendo os campos de entrada para fazer este trabalho (graças Sergey Ilínski).

Não é uma boa prática para redefinir o comportamento padrão, o Enter chave deve sempre chamar o botão enviar em um formulário.

Answer 5

Uma vez que ninguém tem addEventListener usado no entanto, aqui é a minha versão. Dado 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 que você alterar o tipo de evento e ação separadamente, mantendo o HTML limpo.

Nota que é provavelmente vale a pena para garantir que isso está fora de um <form> porque quando eu fechado esses elementos neles pressionar Enter submetidos a forma e recarregado a página. Levei alguns pisca para descobrir.

Adenda : Graças a um comentário por @ruffin, eu adicionei o manipulador de eventos em falta e uma preventDefault para permitir que este código para (presumivelmente) trabalho dentro de uma forma tão bem. (Eu vou dar a volta a testar esta, em que ponto eu vou remover o conteúdo entre parênteses.)

Answer 6

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 em jQuery única, então eu pensei em dar algo em JavaScript simples assim.

Answer 7

Um truque básico que você pode usar para isso que eu não vi totalmente mencionado. Se você quer fazer uma ação ajax, ou algum outro trabalho em entrar, mas não quer realmente enviar um formulário que você pode fazer isso:

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

ação Definir = "javascript: void (0);" como este é um atalho para a prevenção de comportamento padrão essencialmente. Neste caso, um método é chamado se você tecle enter ou clique no botão e uma chamada ajax é feito para carregar alguns dados.

Answer 8

Experimente:

<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 desencadear uma busca cada vez que a tecla ENTER é pressionada, use o seguinte:

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

Este é apenas algo que eu tenho de um projeto relativamente recente ... eu achei na net, e eu não tenho idéia se há uma maneira melhor ou não no bom e velho JavaScript.

Answer 11

Embora, eu tenho certeza que, enquanto há apenas um campo no formulário e um botão enviar, pressionando enter deve enviar o formulário, mesmo se não houver outra forma na página.

Você pode então capturar o onsubmit formulário com js e fazer o que a validação ou retornos de chamada que você deseja.

Answer 12

Esta é uma solução para todos os YUI amantes lá fora:

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

Neste caso especial que eu tinha melhores resultados usando YUI para desencadear objetos DOM que foram injetados com a funcionalidade do botão - mas isso é outra história ...

Answer 13

Em Angular2 :

(keyup.enter)="doSomething()"

Se você não quer algum feedback visual no botão, é um bom projeto para não referenciar o botão, mas sim directamente invocar o controlador.

Além disso, o ID não é necessário -. Uma outra maneira NG2 de separar entre a visão eo modelo

Answer 14

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

Este é um não javascript maneira de atalhos de teclado para animais.

O accesskey atributos atalhos na MDN

intented a ser usado como este. O próprio atributo html é suficiente, howewer podemos mudar o espaço reservado ou outro indicador, dependendo do navegador e sistema operacional. O roteiro é uma abordagem zero não foi testado para dar uma idéia. Você pode querer usar um detector biblioteca navegador como o minúsculo 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

Use keypress e event.key === "Enter" com JS modernos!

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

Mozilla Docs

Browsers

Apoiado

Answer 16

Este onchange tentativa está perto, mas misbehaves com respeito ao navegador de volta, em seguida, para a frente (no Safari 4.0.5 e Firefox 3.6.3), de modo que, em última análise, eu não recomendo-lo.

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

Answer 17

Esta in-case você também quiser desativar a tecla enter de publicar para o 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();" />

Answer 18

event.returnValue = false

Use-o ao manusear o evento ou na função de suas chamadas manipulador de eventos.

Ele funciona no Internet Explorer e Opera, pelo menos.

Answer 19

Para jquery I móvel tinha que fazer

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

Answer 20

Para adicionar uma solução de JavaScript completamente claro que dirigiu de @ icedwater problema com formulário de submissão , aqui está uma solução completa com form .

NOTA: Isto é para "navegadores modernos", incluindo IE9 +. A versão IE8 não é muito mais complicado, e pode ser aprendi aqui .

---

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

Heres meus dois centavos. Eu estou trabalhando em um aplicativo para Windows 8 e deseja que o botão para registrar um evento click quando eu pressionar a tecla Enter. Estou fazendo isso em JS. Eu tentei um par de sugestões, mas teve problemas. Isso funciona muito bem.

Answer 22

Para fazê-lo com jQuery:

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

Para fazê-lo com JavaScript normal:

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

Answer 23

Em moderna, undeprecated (sem keyCode ou onkeydown) Javascript:

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

Answer 24

Para aqueles que podem gostar brevidade e js modernos abordagem.

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

que de entrada é uma variável que contém o elemento de entrada.

Answer 25

Em jQuery, você pode usar event.which==13. Se você tem um form, você poderia usar $('#formid').submit() (com os ouvintes de evento corretos adicionados à apresentação 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>

Answer 26

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

Eu sei que esta questão é resolvido, mas eu só encontrei algo, que pode ser útil para os outros.