Entrez l'événement de presse clé en JavaScript

330

J'ai un formavec deux zones de texte, une sélection de menu déroulant et un bouton radio . Lorsque la entertouche est enfoncée, je veux appeler une fonction Javascript (définie par l'utilisateur), mais lorsque j'appuie dessus, le formulaire est soumis.

Comment empêcher l' formenvoi de la lorsque la entertouche est enfoncée?

javascript forms keypress dom-events enter Shyju
la source

Réponses:

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

Ok, alors imaginez que vous avez la zone de texte suivante dans un formulaire:

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

Afin d'exécuter un script "défini par l'utilisateur" à partir de cette zone de texte lorsque vous appuyez sur la touche Entrée et de ne pas lui soumettre le formulaire, voici un exemple de code. Veuillez noter que cette fonction ne fait aucune vérification d'erreur et ne fonctionnera probablement que dans IE. Pour ce faire, vous avez besoin d'une solution plus robuste, mais vous aurez l'idée générale.

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

renvoyer la valeur de la fonction alertera le gestionnaire d'événements de ne plus propulser l'événement, et empêchera l'événement de pression sur les touches d'être traité davantage.

REMARQUE:

Il a été souligné qu'il keyCodeest désormais obsolète . La deuxième meilleure alternative whicha également été déconseillée .

Malheureusement, la norme préférée key, qui est largement prise en charge par les navigateurs modernes, a un comportement douteux dans IE et Edge . Tout ce qui est plus ancien que IE11 aurait toujours besoin d'un polyfill .

En outre, bien que l'avertissement obsolète soit assez inquiétant keyCodeet which, leur suppression représenterait un changement radical pour un nombre incalculable de sites Web hérités. Pour cette raison, il est peu probable qu'ils se rendent dans un avenir proche.

Josh
la source
4
Qu'entendez-vous exactement par défini par l'utilisateur? Comme, l'utilisateur tape un script dans une zone de texte et vous l'exécutez en utilisant Eval () ???
Josh
1
Est-ce une situation où PreventDefualt peut être utilisé?
12
@ Stuart.Sklinar - Faire une évaluation à l'entrée que l'utilisateur a tapé dans le navigateur ne leur donne pas plus de contrôle que s'ils ouvraient la console de commande dans Chrome / FF / IE et tapaient le script eux-mêmes. La seule personne qu'ils peuvent blesser est eux-mêmes ... à moins bien sûr que vous n'appliquiez pas la sécurité sur le serveur. C'est un tout autre problème.
Josh
1
@SteelBrain - Encore une fois, donner à quelqu'un une zone de texte qu'il peut taper puis evalle contenu en appuyant sur un bouton n'est pas différent que s'il ouvrait les outils de développement et le faisait. Si quelque chose était enregistré dans la base de données et pouvait être ouvert par un autre utilisateur, ce serait un gros problème, mais c'est un problème complètement indépendant de ce petit extrait.
Josh
5
keyCodeest désormais obsolète
John Slegers
138

Utilisez les deux event.whichet event.keyCode:

function (event) {
    if (event.which == 13 || event.keyCode == 13) {
        //code to execute here
        return false;
    }
    return true;
};
Agiagnoc
la source
11
Pourquoi event.which et event.keyCode?
Alex Spurling
35
Certains navigateurs prennent en charge d' whichautres keyCode. Il est recommandé d'inclure les deux.
user568109
Utilisez également l' keydownévénement au lieu de keyupoukeypress
manish_s
@Agiagnoc mais à quel événement cela devrait-il être attaché?
Don Cheadle
2
@manish, keypress vous donne plus d'informations pour jouer qu'avec keydown / up. stackoverflow.com/a/9905293/322537
Fzs2
78

Si vous utilisez jQuery:

$('input[type=text]').on('keydown', function(e) {
    if (e.which == 13) {
        e.preventDefault();
    }
});
cow-boy
la source
1
Je n'ai pas pu faire fonctionner ça. Le gestionnaire se déclenche, mais preventDefaultne semble pas arrêter la soumission du formulaire, au moins dans Chrome.
Drew Noakes
19
Vous devez utiliser l'événement keydown au lieu de keyup:$('input[type=text]').on('keydown', function(e) { if (e.which == 13) { e.preventDefault(); } });
Petar Donchev Marinov
2
la clé est déclenchée APRÈS la soumission et ne peut donc pas l'annuler.
Pierre-Olivier Vares
Les touches et les touches ont fonctionné pour moi. Je suis allé avec une touche. Merci!
markiyanm
'keydown'est correct comme le disent les autres commentateurs. Comme il n'a pas été modifié, je mettrai à jour la réponse. J'ai utilisé cette réponse et j'ai été bloqué pendant un certain temps jusqu'à ce que je revienne et que je regarde les commentaires.
Matt K
71

event.key === "Entrée"

Plus récent et beaucoup plus propre: utilisation event.key. Plus de codes numériques arbitraires!

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

Documents Mozilla

Navigateurs pris en charge

Gibolt
la source
Je cherchais ça. a vu la propriété key dans le journal de la console de $ event. pensait que cela pourrait être plus fiable
tatsu
n'est-ce pas juste une macro ou un alias? y a-t-il un avantage en termes de performances en utilisant ce code?
clockw0rk
1
keyCodeest obsolète. C'est plus lisible et maintenable qu'un entier magique dans votre code
Gibolt
17

Remplacez l' onsubmitaction du formulaire pour être un appel à votre fonction et ajoutez return false après, c'est-à-dire:

<form onsubmit="javascript:myfunc();return false;" >
rpkelly
la source
Je ne peux pas remplacer onsubmit car j'ai un autre formulaire à soumettre dans cette page
Shyju
5
Oui, vous pouvez. Javascript est un langage basé sur un prototype. document.forms ["nom_formulaire"]. onsubmit = fucntion () {}
the_drow
J'ai une autre procédure de suppression à exécuter lorsque le formulaire est soumis, je veux donc le maintenir tel quel
Shyju
17

Une solution React JS

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


 <div>
    <Input type="text"
       ref = "input"
       placeholder="hiya"
       onKeyPress={this.handleChange}
    />
 </div>
caféine
la source
9

Alors peut-être que la meilleure solution pour couvrir autant de navigateurs que possible et être à l'épreuve du temps serait 

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

si vous voulez le faire en utilisant un script purement java, voici un exemple qui fonctionne parfaitement

Disons que c'est votre fichier 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>

dans votre fichier popup.js utilisez simplement cette fonction

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
la source
5

Le code ci-dessous ajoutera un écouteur pour la ENTERclé sur toute la page.

Cela peut être très utile dans les écrans avec un seul bouton d'action, par exemple se connecter, s'inscrire, soumettre, 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>

Testé sur tous les navigateurs.

Hitesh Sahu
la source
3

Une solution jQuery.

Je suis venu ici à la recherche d'un moyen de retarder la soumission du formulaire jusqu'à ce que l'événement flou sur la saisie de texte ait été déclenché.

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

Ce serait bien d'avoir une version plus générale qui a déclenché tous les événements retardés plutôt que de simplement soumettre le formulaire.

chim
la source
3

Un moyen beaucoup plus simple et efficace de mon point de vue devrait être: 

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
la source
2

Utiliser TypeScript et éviter les appels multiples sur la fonction

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

function SearchListEnter(event: KeyboardEvent) {
    if (event.which !== 13) {
        return;
    }
    // more stuff
}
Wagner Pereira
la source
Cette question a plus de huit ans. Le tapuscrit n'existait pas à l'époque. Êtes-vous sûr de ne pas répondre à une autre question?
Nico Haase
2

Un peu simple

N'envoyez pas le formulaire en appuyant sur "Entrée":

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

Exécutez la fonction en appuyant sur "Entrée":

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

js natif (fetch 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">
Développer l'extrait

xgqfrms
la source
Pourquoi client_id etc a-t-il été inclus ici? Le code est-il légitime?
eddyparkinson
1 
<form id="form1" runat="server" onkeypress="return event.keyCode != 13;">

Ajoutez ce code dans votre page HTML ... cela désactivera ... Entrez le bouton ..

Akhilesh Singh
la source
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
la source
0

Solution Cross Browser

Certains navigateurs plus anciens implémentaient les événements de keydown d'une manière non standard.

KeyBoardEvent.key est la façon dont il est censé être implémenté dans les navigateurs modernes.

which et keyCodesont obsolètes de nos jours, mais cela ne fait pas de mal de vérifier ces événements pour que le code fonctionne pour les utilisateurs qui utilisent toujours des navigateurs plus anciens comme IE.

La isKeyPressedfonction vérifie si la touche enfoncée a été entrée et event.preventDefault()empêche la soumission du formulaire.

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

Exemple de travail minimal

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