Inserir evento de pressionamento de tecla em JavaScript

330

Eu tenho um formcom duas caixas de texto, um select drop-down e um botão de rádio . Quando a entertecla é pressionada, desejo chamar uma função Javascript (definida pelo usuário), mas quando a pressiono, o formulário é enviado.

Como impeço o formenvio quando a entertecla é pressionada?

javascript forms keypress dom-events enter Shyju
fonte

Respostas:

445 
if(characterCode == 13)
{
    return false; // returning false will prevent the event from bubbling up.
}
else
{
    return true;
}

Ok, imagine que você tenha a seguinte caixa de texto em um formulário:

<input id="scriptBox" type="text" onkeypress="return runScript(event)" />

Para executar algum script "definido pelo usuário" nessa caixa de texto quando a tecla Enter for pressionada e não enviar o formulário, aqui está um código de exemplo . Observe que essa função não realiza nenhuma verificação de erro e provavelmente só funcionará no IE. Para fazer isso corretamente, você precisa de uma solução mais robusta, mas terá a ideia geral.

function runScript(e) {
    //See notes about 'which' and 'key'
    if (e.keyCode == 13) {
        var tb = document.getElementById("scriptBox");
        eval(tb.value);
        return false;
    }
}

o retorno do valor da função alertará o manipulador de eventos para não interromper o evento e evitará que o evento de pressionamento de tecla seja tratado ainda mais.

NOTA:

Foi apontado que agorakeyCode está obsoleto . A próxima melhor alternativa whichtem também foi preterido .

Infelizmente, o padrão preferido key, que é amplamente suportado por navegadores modernos, tem algum comportamento desonesto no IE e no Edge . Qualquer coisa mais antiga que o IE11 ainda precisaria de um polyfill .

Além disso, enquanto o aviso deprecated é bastante sinistra sobre keyCodee which, retirando aqueles que representaria uma alteração de quebra enorme para um número incontável de sites legados. Por esse motivo, é improvável que eles cheguem a algum lugar em breve.

Josh
fonte
4
O que exatamente você quer dizer com definido pelo usuário? Tipo, o usuário digita algum script em uma caixa de texto e você o executa usando Eval () ???
2128 Josh
1
É uma situação em que o PreventDefualt pode ser usado?
12
@ Stuart.Sklinar - Ao fazer uma avaliação na entrada, o usuário digitou no navegador não oferece mais controle do que abrir o console de comando no Chrome / FF / IE e digitar o próprio script. A única pessoa que eles podem ferir é eles mesmos ... a menos que você não esteja reforçando a segurança no servidor. Essa é outra questão completamente.
21413 Josh
1
@SteelBrain - Novamente, dar a alguém uma caixa de texto para digitar e depois evalo conteúdo pressionando um botão não é diferente do que se eles abrissem as ferramentas do desenvolvedor e o fizessem. Se isso fosse algo que estava sendo salvo no banco de dados e pudesse ser aberto por outro usuário, seria um grande problema, mas esse é um problema que é completamente independente desse pequeno trecho.
Josh
5
keyCodeagora está obsoleto
John Slegers
138

Use ambos event.whiche event.keyCode:

function (event) {
    if (event.which == 13 || event.keyCode == 13) {
        //code to execute here
        return false;
    }
    return true;
};
Agiagnoc
fonte
11
Por que event.which e event.keyCode?
Alex Spurling
35
Alguns navegadores suportam whichoutros keyCode. É uma boa prática incluir ambos.
User568109
Também use o keydownevento em vez de keyupoukeypress
manish_s
@ Agiagnoc, mas a qual evento isso deve ser anexado?
Don Cheadle
2
@ manish, a tecla pressionada fornece mais informações para você tocar do que a tecla pressionada / cima. stackoverflow.com/a/9905293/322537
Fzs2
78

Se você estiver usando jQuery:

$('input[type=text]').on('keydown', function(e) {
    if (e.which == 13) {
        e.preventDefault();
    }
});
vaqueiro
fonte
1
Não consegui fazer isso funcionar. O manipulador é acionado, mas preventDefaultparece não parar o envio do formulário, pelo menos no Chrome.
de Drew Noakes
19
Você deve usar o evento keydown em vez de keyup:$('input[type=text]').on('keydown', function(e) { if (e.which == 13) { e.preventDefault(); } });
Petar Donchev Marinov 04/10/12
2
O keyup é acionado APÓS o envio e, portanto, não pode cancelá-lo.
Pierre-Olivier Vares
Tanto o keyup quanto o keypress funcionaram para mim. Eu fui com o pressionamento de tecla. Obrigado!
markiyanm
'keydown'está correto como os outros comentadores estão afirmando. Como não foi alterado, atualizarei a resposta. Eu usei essa resposta e fiquei preso por um tempo até voltar e olhar os comentários.
Matt K
71

event.key === "Enter"

Mais recente e muito mais limpo: use event.key. Chega de códigos numéricos arbitrários!

const node = document.getElementsByClassName(".mySelect")[0];
node.addEventListener("keydown", function(event) {
    if (event.key === "Enter") {
        event.preventDefault();
        // Do more work
    }
});

Documentos do Mozilla

Navegadores suportados

Gibolt
fonte
Estava procurando por isso. viu a propriedade key no log do console de $ event. pensei que poderia ser mais confiável
tatsu
isso não é apenas uma macro ou apelido? existe algum benefício em termos de desempenho usando esse código?
Clockw0rk 28/09
1
keyCodeestá obsoleto. Esta é mais legível e de fácil manutenção do que um inteiro magia em seu código
Gibolt
17

Substitua a onsubmitação do formulário para ser uma chamada para sua função e adicione return false depois dela, ou seja:

<form onsubmit="javascript:myfunc();return false;" >
rpkelly
fonte
Eu não posso substituir onsubmit como eu tenho uma outra forma enviar nesta página
Shyju
5
sim você pode. Javascript é uma linguagem baseada em protótipo. document.forms ["form_name"]. onsubmit = fucntion () {}
the_drow
Eu tenho outro procedimento de exclusão para executar quando o formulário é enviado
Portanto
17

Uma solução react js

 handleChange: function(e) {
    if (e.key == 'Enter') {
      console.log('test');
    }


 <div>
    <Input type="text"
       ref = "input"
       placeholder="hiya"
       onKeyPress={this.handleChange}
    />
 </div>
caffeinescript
fonte
9

Portanto, talvez a melhor solução para cobrir o maior número possível de navegadores e estar à prova do futuro seja 

if (event.which === 13 || event.keyCode === 13 || event.key === "Enter")
Matt Doran
fonte
6

se você quiser fazê-lo usando puramente script java, aqui está um exemplo que funciona perfeitamente

Digamos que este é o seu arquivo html 

<!DOCTYPE html>
<html>
  <body style="width: 500px">
    <input type="text" id="textSearch"/> 
      <script type="text/javascript" src="public/js/popup.js"></script>
  </body>
</html>

no seu arquivo popup.js, basta usar esta função

var input = document.getElementById("textSearch");
input.addEventListener("keyup", function(event) {
    event.preventDefault();
    if (event.keyCode === 13) {
        alert("yes it works,I'm happy ");
    }
});
DINA TAKLIT
fonte
5

O código abaixo adicionará o ouvinte para a ENTERchave na página inteira.

Isso pode ser muito útil em telas com um único botão de ação, por exemplo, login, registro, envio etc. 

<head>
        <!--Import jQuery IMPORTANT -->
        <script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>

         <!--Listen to Enter key event-->
        <script type="text/javascript">

            $(document).keypress(function (e) {
                if (e.which == 13 || event.keyCode == 13) {
                    alert('enter key is pressed');
                }
            });
        </script>
    </head>

Testado em todos os navegadores.

Hitesh Sahu
fonte
3

Uma solução jQuery.

Eu vim aqui procurando uma maneira de atrasar o envio do formulário até que o evento de desfoque na entrada de texto tenha sido disparado.

$(selector).keyup(function(e){
  /*
   * Delay the enter key form submit till after the hidden
   * input is updated.
   */

  // No need to do anything if it's not the enter key
  // Also only e.which is needed as this is the jQuery event object.
  if (e.which !== 13) {
       return;
  }

  // Prevent form submit
  e.preventDefault();

  // Trigger the blur event.
  this.blur();

  // Submit the form.
  $(e.target).closest('form').submit();
});

Seria bom obter uma versão mais geral que disparasse todos os eventos atrasados, e não apenas o envio do formulário.

chim
fonte
3

Uma maneira muito mais simples e eficaz da minha perspectiva deve ser: 

function onPress_ENTER()
{
        var keyPressed = event.keyCode || event.which;

        //if ENTER is pressed
        if(keyPressed==13)
        {
            alert('enter pressed');
            keyPressed=null;
        }
        else
        {
            return false;
        }
}
Thanos
fonte
2

Usando TypeScript, e evite chamadas múltiplas na função

let el1= <HTMLInputElement>document.getElementById('searchUser');
el1.onkeypress = SearchListEnter;

function SearchListEnter(event: KeyboardEvent) {
    if (event.which !== 13) {
        return;
    }
    // more stuff
}
Wagner Pereira
fonte
Esta pergunta tem mais de oito anos. O texto datilografado não existia então. Então, você tem certeza de que não está respondendo a outra pergunta?
Nico Haase
2

Um pouco simples

Não envie o formulário pressionando a tecla "Enter":

<form id="form_cdb" onsubmit="return false">

Execute a função pressionando a tecla "Enter":

<input type="text" autocomplete="off" onkeypress="if(event.key === 'Enter') my_event()">
rbz
fonte
1

js nativo (buscar api)

document.onload = (() => {
    alert('ok');
    let keyListener = document.querySelector('#searchUser');
    // 
    keyListener.addEventListener('keypress', (e) => {
        if(e.keyCode === 13){
            let username = e.target.value;
            console.log(`username = ${username}`);
            fetch(`https://api.github.com/users/${username}`,{
                data: {
                    client_id: 'xxx',
                    client_secret: 'xxx'
                }
            })
            .then((user)=>{
                console.log(`user = ${user}`);
            });
            fetch(`https://api.github.com/users/${username}/repos`,{
                data: {
                    client_id: 'xxx',
                    client_secret: 'xxx'
                }
            })
            .then((repos)=>{
                console.log(`repos = ${repos}`);
                for (let i = 0; i < repos.length; i++) {
                     console.log(`repos ${i}  = ${repos[i]}`);
                }
            });
        }else{
            console.log(`e.keyCode = ${e.keyCode}`);
        }
    });
})();
<input _ngcontent-inf-0="" class="form-control" id="searchUser" placeholder="Github username..." type="text">
Expandir snippet

xgqfrms
fonte
Por que client_id etc foi incluído aqui? O código é legítimo?
Eddyparkinson
1 
<form id="form1" runat="server" onkeypress="return event.keyCode != 13;">

Adicione este código na sua página HTML ... ele será desativado ... Botão Enter ..

Akhilesh Singh
fonte
0 
<div class="nav-search" id="nav-search">
        <form class="form-search">
            <span class="input-icon">
                <input type="text" placeholder="Search ..." class="nav-search-input" id="search_value" autocomplete="off" />
                <i class="ace-icon fa fa-search nav-search-icon"></i>
            </span>
            <input type="button" id="search" value="Search" class="btn btn-xs" style="border-radius: 5px;">
        </form>

</div>

<script type="text/javascript">
    $("#search_value").on('keydown', function(e) {
        if (e.which == 13) {
             $("#search").trigger('click');
            return false;
        }
    });
    $("#search").on('click',function(){
        alert('You press enter');
    });
</script>
Mizanur Rahaman
fonte
0

Solução entre navegadores

Alguns navegadores mais antigos implementaram eventos de pressionamento de tecla de maneira não padrão.

KeyBoardEvent.key é o modo como deve ser implementado nos navegadores modernos.

which e keyCodeestão obsoletas hoje em dia, mas não custa verificar esses eventos para que o código funcione para usuários que ainda usam navegadores mais antigos como o IE.

A isKeyPressedfunção verifica se a tecla pressionada foi inserida e event.preventDefault()impede o envio do formulário.

  if (isKeyPressed(event, 'Enter', 13)) {
    event.preventDefault();
    console.log('enter was pressed and is prevented');
  }

Exemplo de trabalho mínimo

JS

function isKeyPressed(event, expectedKey, expectedCode) {
  const code = event.which || event.keyCode;

  if (expectedKey === event.key || code === expectedCode) {
    return true;
  }
  return false;
}

document.getElementById('myInput').addEventListener('keydown', function(event) {
  if (isKeyPressed(event, 'Enter', 13)) {
    event.preventDefault();
    console.log('enter was pressed and is prevented');
  }
});

HTML

<form>
  <input id="myInput">
</form>

https://jsfiddle.net/tobiobeck/z13dh5r2/

Tobi Obeck
fonte