web-dev-qa-db-fra.com

Comment capturer la touche Entrée?

Dans ma page HTML, j'avais une zone de texte pour que l'utilisateur saisisse un mot clé pour la recherche. Lorsqu'ils cliquent sur le bouton de recherche, la fonction JavaScript génère une URL et s'exécute dans une nouvelle fenêtre.

La fonction JavaScript fonctionne correctement lorsque l'utilisateur clique sur le bouton de recherche avec la souris, mais il ne répond pas lorsqu'il appuie sur la touche Entrée.

function searching() {            
            var keywordsStr = document.getElementById('keywords').value;
            var cmd ="http://XXX/advancedsearch_result.asp?language=ENG&+"+ encodeURI(keywordsStr) + "&x=11&y=4";
            window.location = cmd;
        }

    <form name="form1" method="get">
             <input name="keywords" type="text" id="keywords" size="50" >
             <input type="submit" name="btn_search" id="btn_search" value="Search" 
onClick="javascript:searching(); return false;" onKeyPress="javascript:searching(); return false;">
             <input type="reset" name="btn_reset" id="btn_reset" value="Reset">
    </form>
javascriptjavascript-eventstextboxkeypressonkeypress
45
Joe Yan

Approche de la forme

Comme le dit scoota269, vous devriez plutôt utiliser onSubmit, car appuyer sur la touche Entrée de la zone de texte déclenchera probablement l'envoi d'un formulaire (s'il se trouve dans un formulaire)

<form action="#" onsubmit="handle">
    <input type="text" name="txt" />
</form>

<script>
    function handle(e){
        e.preventDefault(); // Otherwise the form will be submitted

        alert("FORM WAS SUBMITTED");
    }
</script>

Approche de la zone de texte

Si vous souhaitez qu'un événement se produise dans le champ de saisie, vous devez vous assurer que votre handle() renverra false, sinon le formulaire sera soumis.

<form action="#">
    <input type="text" name="txt" onkeypress="handle(event)" />
</form>

<script>
    function handle(e){
        if(e.keyCode === 13){
            e.preventDefault(); // Ensure it is only this code that rusn

            alert("Enter was pressed was presses");
        }
    }
</script>
79
TryingToImprove

Utilisez onkeypress. Vérifiez si la touche enfoncée est entrée (keyCode = 13). Si oui, appelez la fonction searching().

HTML

<input name="keywords" type="text" id="keywords" size="50"  onkeypress="handleKeyPress(event)">

_ JAVASCRIPT

function handleKeyPress(e){
 var key=e.keyCode || e.which;
  if (key==13){
     searching();
  }
}

Voici un extrait qui le montre en action:

document.getElementById("msg1").innerHTML = "Default";
function handle(e){
 document.getElementById("msg1").innerHTML = "Trigger";
 var key=e.keyCode || e.which;
  if (key==13){
     document.getElementById("msg1").innerHTML = "HELLO!";
  }
}
<input type="text" name="box22" value="please" onkeypress="handle(event)"/>
<div id="msg1"></div>

23
bipen

Essaye ça....

HTML en ligne

onKeydown="Javascript: if (event.keyCode==13) fnsearch();"
or
onkeypress="Javascript: if (event.keyCode==13) fnsearch();"

JavaScript

<script>
function fnsearch()
{
   alert('you press enter');
}
</script>
6
Rahul Dadhich

Vous pouvez utiliser javascript 

ctl.attachEvent('onkeydown', function(event) {

        try {
            if (event.keyCode == 13) {
                FieldValueChanged(ctl.id, ctl.value);
            }
            false;
        } catch (e) { };
        return true
    })
5
user2753926

Un peu de jQuery générique pour vous ..

$('div.search-box input[type=text]').on('keydown', function (e) {
    if (e.which == 13) {
        $(this).parent().find('input[type=submit]').trigger('click');
        return false;
     }
});

Cela fonctionne sur le suppose que la zone de texte et le bouton d'envoi sont encapsulés sur le même div. fonctionne un traitement avec plusieurs zones de recherche sur une page

3
Andy - CodeRemedy

Utilisez un attribut onsubmit sur la balise de formulaire plutôt que onclick sur la soumission.

2
scoota269

Vous devez créer un gestionnaire pour l'action onkeypress. 

HTML

<input name="keywords" type="text" id="keywords" size="50" onkeypress="handleEnter(this, event)" />

JS

function handleEnter(inField, e)
{
    var charCode;

    //Get key code (support for all browsers)
    if(e && e.which)
    {
        charCode = e.which;
    }
    else if(window.event)
    {
        e = window.event;
        charCode = e.keyCode;
    }

    if(charCode == 13)
    {
       //Call your submit function
    }
}
2
ᴍᴀᴛᴛ ʙᴀᴋᴇʀ

	// jquery press check by Abdelhamed Mohamed


    $(document).ready(function(){
    $("textarea").keydown(function(event){
        if (event.keyCode == 13) {
         // do something here
         alert("You Pres Enter");
        }
       });
    });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <textarea></textarea>

2
Abdelhamed Mohamed
<form action="#">
    <input type="text" id="txtBox" name="txt" onkeypress="handle" />
</form>






<script>
    $("#txtBox").keypress(function (e) {
            if (e.keyCode === 13) {
                alert("Enter was pressed was presses");
            }

            return false;
        });

    </script>
1
ch.smrutiranjan parida

Facile à lécher une glace, supposons:

votre page avant: 

<body>

votre page maintenant: 

<body onkeypress=if(event.keyCode==13)alert('hi')>

Ceci est un exemple aussi simple qu'il est; En supposant que vous ayez votre page avec une balise plain body et si vous insérez cette fonction onkeypress qui fonctionne toute seule, cela signifie que chaque fois que vous appuyez sur la touche Entrée, l'alerte apparaîtra

Alors remplacez votre tag BODY par celui-ci et appuyez sur ENTER pour le tester, vous le verrez fonctionner

1
PYK

Utilisez event.key au lieu de event.keyCode!

function onEvent(event) {
    if (event.key === "Enter") {
        // Submit form
    }
};

Mozilla Docs

Navigateurs pris en charge

0
Gibolt

C'est une réponse simple dans le style ES-6. Pour capturer une touche "Entrée" et exécuter une fonction

<input
    onPressEnter={e => (e.keyCode === 13) && someFunc()}
/>
0
Glen Thompson