web-dev-qa-db-fra.com

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

J'ai un form avec deux zones de texte, un sélectionner déroulant et un bouton radio. Quand le enter la touche est enfoncée, je souhaite appeler une fonction javascript (définie par l'utilisateur), mais lorsque j'appuie dessus, le formulaire est soumis.

Comment puis-je éviter que form soit soumis lorsque le enter la touche est enfoncée?

formsjavascript-eventskeypressenter
272
Shyju
if(characterCode == 13)
{
    return false; // returning false will prevent the event from bubbling up.
}
else
{
    return true;
}

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

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

Pour exécuter un script "défini par l'utilisateur" à partir de cette zone de texte lorsque vous appuyez sur la touche Entrée, sans le soumettre au formulaire, voici un code exemple. Veuillez noter que cette fonction ne vérifie pas les erreurs 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;
    }
}

le renvoi de la valeur de la fonction avertira le gestionnaire d'événements de ne plus masquer l'événement et empêchera la gestion de l'événement de pression.

REMARQUE:

Il a été souligné que keyCode est maintenant obsolète . La prochaine meilleure alternative which a a également été déconseillée .

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

En outre, bien que l’avertissement déconseillé soit plutôt inquiétant pour keyCode et which, le fait de les supprimer représenterait un changement radical majeur en ce qui concerne un nombre incalculable de sites Web existants. Pour cette raison, il est peu probable qu'ils partent de si tôt.}

380
Josh

Utilisez à la fois event.which et event.keyCode:

function (event) {
    if (event.which == 13 || event.keyCode == 13) {
        //code to execute here
        return false;
    }
    return true;
};
118
Agiagnoc

Si vous utilisez jQuery:

$('input[type=text]').on('keydown', function(e) {
    if (e.which == 13) {
        e.preventDefault();
    }
});
69
cowboy

event.key === "Enter"

Plus récent et beaucoup plus propre: utilisez event.key. Plus de codes de nombres arbitraires!

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

Mozilla Docs

Navigateurs pris en charge

34
Gibolt

Touche Détecter Entrée appuyée sur tout le document:

$(document).keypress(function (e) {
    if (e.which == 13) {
        alert('enter key is pressed');
    }
});

http://jsfiddle.net/umerqureshi/dcjsa08n/3/

18
umer

Remplacez l'action onsubmit du formulaire par un appel à votre fonction et ajoutez la valeur false après,

<form onsubmit="javascript:myfunc();return false;" >
17
rpkelly

Une solution js réaction

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


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

Le code ci-dessous ajoutera un écouteur pour la clé ENTER sur la page entière.

Cela peut être très utile dans les écrans avec un seul bouton Action, par exemple Login, Register, Submit, 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. 

5
Hitesh Sahu

Une solution jQuery.

Je suis venu ici pour chercher un moyen de retarder la soumission du formulaire jusqu'à ce que le flou sur le texte saisi 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’obtenir une version plus générale qui déclenche tous les événements retardés plutôt que de simplement envoyer le formulaire.

3
chim

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
}
2
Wagner Pereira

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;
        }
}
2
Thanos

Alors peut-être que la meilleure solution pour couvrir autant de navigateurs que possible et être la preuve du futur serait 

if (event.which == 13 || event.keyCode == 13 || event.key === "Entrée")

1
Matt Doran

js natif (chercher 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">

1
xgqfrms

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

Disons que ceci 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 popup.js fichier, 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 ");
    }
});
1
DINA TAKLIT

Un peu simple

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

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

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

<input type="text" autocomplete="off" onkeypress="if(event.key === 'Enter') my_event()">
0
rbz
<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>
0
Mizanur Rahaman

Cette fonction preventKey() fonctionne quelles que soient les fonctionnalités du navigateur, obsolètes.

Une seule des trois propriétés which (obsolète), keyCode (obsolète) ou key (problèmes dans IE) doit être présente.

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

JS

function preventKey(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 (preventKey(event, 'Enter', 13)) {
    event.preventDefault();
  }
});

HTML

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

Test du navigateur

Si vous souhaitez tester différents navigateurs manuellement, commentez ou commentez l'une des trois lignes event.something suivantes:

var event = {};
event.which = 13;
//event.keyCode = 13;
//event.key = 'Enter'

if (preventKey(event, 'Enter', 13)) {
  console.log('enter was pressed');
}
0
Tobi Obeck