javascript - html中的表单提交触发器

Question

在 HTML 中，可以通过以下方式提交表单

• 点击提交按钮
• 当焦点位于提交按钮上时按 Enter
• 通过在输入字段上按 enter

有没有办法找出提交表单的三种方法中的哪一种？

Answer 1

据我所知，HTML 没有任何内置的认知方式。您必须捕获必要的事件并将状态保存在内存中。类似于以下内容：

• 当输入获得焦点时将 a 设置bool为 true。失去焦点时将其设置回 false。
• 当按钮获得焦点时将 a 设置bool为 true。失去焦点时将其设置回 false。
• 订阅按钮上的点击事件，设置abool为true
• 订阅键盘的keydown事件，检查是否为回车键，设置abool为true。

现在您应该有必要的信息来了解用户为提交表单采取了哪些操作。jQuery 应该能够帮助您处理所有这些事件。

另外，我相信当表单具有焦点（不仅仅是按钮或输入）并且您按 Enter 时，也会提交表单。我不确定这是具有焦点的实际表单，还是表单内的任何控件。

因此，您要实现的目标将需要一些技巧。您确定不能以其他方式为用户提供您想要的体验吗？

Answer 2

如果用户按下回车键，我会使用keypressjquery 的方法来捕获。mousedown以及捕获点击的方法。jquery 和 HTML 代码如下所示：

HTML：

<form id="myForm">
    Name<input type="text" />
    Address<input type="text" />
    <button id="submitBtn" type="button">Submit</button>
</form>

jQuery代码：

$('#submitBtn').keypress(function(event){

    var keycode = (event.keyCode ? event.keyCode : event.which);
    if(keycode == '13'){
        alert('You pressed "enter" key on the submit button');  
    }
    event.stopPropagation();

});

$('#myForm').keypress(function(event){

    var keycode = (event.keyCode ? event.keyCode : event.which);
    if(keycode == '13'){
        alert('You pressed "enter" key in the input field');    
    }
    event.stopPropagation();
});

$('#submitBtn').mousedown(function(event){
   alert('You clicked submit'); 
   event.stopPropagation();
});

提琴手

Answer 3

只需对每个动作应用不同的功能。为了防止表单触发其默认操作，您必须在回调函数中放置return false;或。event.preventDeafult();

看例子：http: //jsfiddle.net/6krYM/

HTML：

<form>
    <input type='text' id='input'>
    <input type='submit' value='submit' id='submit-button'>
</form>

JavaScript：

$("#submit-button").click(function(){
    alert("click on submit button");
    return false;
});

$("#input").keypress(function(e){
    if (e.which == 13){
        e.preventDefault();
        alert("press enter in text");
    }
});

$("#submit-button").keypress(function(e){
    if (e.which == 13){
        alert("press enter on button");
    }
    return false;
});