Question

在HTML中，表单可以通过

提交

点击提交按钮
当焦点在提交按钮上时按Enter键
在输入字段中按Enter键

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

Answer 1

据我所知，HTML没有任何内置的了解方式。你必须抓住必要的事件并将状态保持在记忆中。如下所示：

当输入获得焦点时，将bool设置为true。当它失去焦点时将其设置为假。
当按钮获得焦点时，将bool设置为true。当它失去焦点时将其设置为假。
订阅按钮上的点击事件，将bool设置为true
订阅键盘的keydown事件，检查它是否为enter键，并将bool设置为true。

现在您应该掌握必要的信息，以了解用户提交表单所采取的操作。 jQuery应该能够帮助你完成所有这些事件。

此外，我相信当表单具有焦点时（而不仅仅是按钮或输入）也会提交表单，然后按Enter键。我不确定这是具有焦点的实际形式，还是形式内的任何控制。

所以，你想要实现的目标需要一些黑客攻击。您确定无法以其他方式为用户提供所需的体验吗？

Answer 2

如果用户按下回车键，我会使用jquery的keypress方法来捕获。与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();
});

JsFiddle

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

在html中表单提交触发器

3 个答案: