更改焦点后取消onkeypress事件

我的用户希望此表单可以在按Enter而不是提交表单时将焦点提前到下一个字段。我在测试输入中添加了onkeypress处理程序，以便在按下Enter时更改焦点。更改焦点后取消onkeypress事件

在下面的代码中，当keydown函数改变焦点时，我看到光标跳转到新的文本框，但随后表单被提交，就像我再次按下回车键一样。我认为，通过在我的事件处理程序中返回false，事件不会被传递，但似乎并非如此。我在Chrome和Firefox中都看到过这种行为。

有人能告诉我我失踪了什么吗？

<form action="" name="confirmation" method="post"> 
    <fieldset> 
     <div class="clearfix"> 
      <label for="id_event_fuel_amount">Quantity:</label> 

      <div class="input"> 
       <input type="text" id="event_fuel_amount_id" name="event_fuel_amount" onkeypress="keydown(event, &#39;event_purchase_amount_id&#39;)" /> 

      </div> 
     </div> 
     <div class="clearfix"> 
      <label for="id_event_purchase_amount">Sale:</label> 

      <div class="input"> 
       <input type="text" id="event_purchase_amount_id" name="event_purchase_amount" /> 

      </div> 
     </div> 


     <input type="hidden" name="state" value="3" id="id_state" /> 

     <input type="hidden" name="time_stamp" value="2011-09-24 14:34:06" id="id_time_stamp" /> 

     <input type="hidden" name="purchase" value="66" id="id_purchase" /> 


     <input type="submit" value="Save"/> 
    </fieldset> 
</form> 

<script> 
    function keydown(e,s){ 
     if (!e) var e = window.event; 
     if (e.keyCode) code = e.keyCode; 
     else if (e.which) code = e.which; 
     if (code==13){ 
      document.getElementById(s).focus(); 
      return false; 
     } 
    } 
</script>

来源

2011-09-24 dgajohnson

是'onkeypress'属性真的有必要吗？以编程方式绑定事件将是一个更好的选择...（因为那样你就不必将'keypress'函数暴露给全局命名空间） –

尝试

e.preventDefault();

这应该防止事件射击的形式提交。

来源

2011-09-24 19:02:02

Worked !!!谢谢。 – dgajohnson

我想这可能帮助：

<script type="text/javascript"> 
document.getElementById('hello').onkeydown=function(e){ 
    var e=window.event || e; 
    if (e.keyCode == 13) return false; 
} 
</script> 
<input type="text" id="hello" />

这里是一个演示：jsFiddle demo

来源

2011-09-24 19:07:59

更改焦点后取消onkeypress事件

回答

相关问题