捕获Enter键以使用javascript导致按钮单击

时间:2010-12-05 06:17:38

标签: javascript html

我想捕获Enter键以使按钮单击

我有这个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
            }
        }
   }

使用html

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

这适用于IE浏览器,但它没有使用Firefox,

为什么?任何人都可以修复此JavaScript代码以适用于所有浏览器。

谢谢

4 个答案:

答案 0 :(得分:7)

你真的不应该使用内联事件处理程序:

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

您的HTML应如下所示:

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

答案 1 :(得分:5)

我建议使用keydown事件代替此特定情况,因为它简化了密钥检测:您可以在所有浏览器中使用keyCode。此外,您传递了要单击的按钮的ID,但之后没有使用它,所以我改变了它。另外,我添加了return false以防止按Enter键的默认行为(虽然这部分在Opera中没有任何效果:你需要取消keypress事件在那个浏览器中):

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

}

答案 2 :(得分:2)

为什么不使用像jQuery这样的包装器js框架?它为您完成所有跨浏览器的操作。只是在我的头顶,这可能工作(仍然,你应该验证):

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

答案 3 :(得分:0)

的onkeydown

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