Capturer la touche Entrée pour utiliser un bouton cliquez avec le javascript

Question

je veux Capturer la touche Entrée pour utiliser un bouton cliquez sur

j'ai ce javascript:

function doClick(buttonName,e) 
    { 
     //the purpose of this function is to allow the enter key to 
     //point to the correct button to click. 
     var key; 

     if(window.event) 
       key = window.event.keyCode;  //IE 
     else 
       key = e.which;  //firefox 

     if (key == 13) 
     { 
      //Get the button the user wants to have clicked 
      var btn = document.getElementById('submit'); 
      if (btn != null) 
      { //If we find the button click it 
       btn.click(); 
       event.keyCode = 0 
      } 
     } 
    } 

avec html

<input type="button" id="submit" value="Search" onClick="doSomeThing();" /> 
<input type="text" name="search" onKeyPress="doClick('submit',event)" /> 

cela fonctionne très bien avec le navigateur IE mais pas avec Firefox,

Pourquoi? Quelqu'un peut-il corriger ce code javascript pour fonctionner sur tous les navigateurs.

merci

Answer 1

Vous devriez vraiment pas utiliser des gestionnaires d'événements en ligne:

window.onload = function() { 
    document.getElementById('submit').onclick = doSomething; 
    document.getElementById('search').onkeypress = function(e) { 
     doClick('submit', e); 
    }; 
}; 

function doClick(buttonName,e) 
{ 
    //the purpose of this function is to allow the enter key to 
    //point to the correct button to click. 
    var ev = e || window.event; 
    var key = ev.keyCode; 

    if (key == 13) 
    { 
    //Get the button the user wants to have clicked 
    var btn = document.getElementById(buttonName); 
    if (btn != null) 
    { 
     //If we find the button click it 
     btn.click(); 
     ev.preventDefault(); 
    } 
    } 
} 

Votre code HTML devrait ressembler à ceci:

<input type="button" id="submit" value="Search"/> 
<input type="text" name="search" id="search" /> 

Answer 2

Pourquoi ne pas utiliser un cadre de js wrapper comme jQuery ? Il fait tout le matériel de cross-browser pour vous. Juste à côté du haut de ma tête, cela pourrait fonctionner (encore, vous devriez probablement vérifier):

jQuery(function(){ 
    jQuery(window).keyup(function(e){ 
    if (e.keyCode == 13) { 
     // handle click logic here 
    } 
    }); 
}); 

Answer 3

Je suggère d'utiliser l'événement keydown au lieu de ce cas particulier, car il simplifie la détection clé: vous pouvez utiliser keyCode dans tous les navigateurs. En outre, vous passez l'ID du bouton que vous voulez cliquer mais ne l'utilisez pas, donc j'ai changé cela. En outre, j'ai ajouté un return false pour empêcher le comportement par défaut d'appuyer sur la touche Entrée (bien que cette partie n'aura aucun effet dans Opera: vous devrez supprimer l'événement keypress à la place dans ce navigateur):

function doClick(buttonId, e) 
    { 
    if (e.keyCode == 13) 
     { 
     // Get the button the user wants to have clicked 
     var btn = document.getElementById(buttonId); 
     if (btn) 
     { 
      btn.click(); 
      return false; 
     } 
    } 

}

Answer 4

onKeyDown

if (event.keyCode == 13) { 
    document.getElementById('submit').click(); 
    return false; 
}