更改焦点后取消 onkeypress 事件

发布于 2024-12-06 11:05:53 字数 1769 浏览 0 评论 0原文

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

在下面的代码中，当 keydown 函数更改焦点时，我看到光标跳转到新的文本框，但随后表单被提交，就像我再次按下 Enter 键一样。我认为通过在事件处理程序中返回 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>

原文

My users want this form to advance focus to the next field when enter is press instead of submitting the form. I've added an onkeypress handler to the test input to change the focus when enter is press.

In the code below, when keydown function changes focus, I see the cursor jump to the new textbox but then the form gets submitted as if I pressed the enter key again. I thought that by returning false in my event handler the event would not be passed on but that does not seem to be the case. I've seen this behavior in both Chrome and Firefox.

Could someone tell me what I am missing?

<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, 'event_purchase_amount_id')" />
                
            </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>

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

墨落成白 2024-12-13 11:05:53

尝试

e.preventDefault();

这应该可以防止事件触发表单提交。

Try

e.preventDefault();

That should prevent the event from firing the form submit.

回复收藏 0 原文

百变从容 2024-12-13 11:05:53

我认为这可能会有所帮助：

<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 演示

I think this might help:

<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" />

Here is a demo: jsFiddle demo

回复收藏 0 原文

~没有更多了~