Question

我有一个表单，我可以使用div来关注tabindex="0"。除了可以在form密钥上提交enter之外，一切正常。它在input聚焦时起作用，但在div具有焦点时却不起作用。

我知道我可以使用一些JavaScript来捕获enter密钥并提交最接近的form，但还有其他方法可以解决这个问题吗？

这是一个证明问题的小提琴。 https://jsfiddle.net/ajqfm3Lb/1/

Answer 1

好吧，您可以实际检查表单中的任何元素的Enter按键，而不是提交＆＃34;最接近的表单＆＃34;我意识到这有点类似于你没有寻找的解决方案，但是我不确定你是否意识到你可以将那个按键事件与形式。

检查出来：

https://jsfiddle.net/ajqfm3Lb/9/

$("form").on("keypress", "*:not(textarea)", function(e) { if (e.which == 13) { alert("submitted"); return false; } });

此事件仅在焦点位于表单上时按键时触发，因为keypress事件仅与选择器$("form")相关联。 e.which == 13只是检查输入，具体而言。

当然，您可以将$("form")修改为任何选择器（例如，表单＆＃39; s ID，班级等。）

编辑：正如您所指出的，只需听取＆＃34;输入＆＃34;按下表单会导致需要使用它的元素出现问题，例如textarea。我已经使用事件委派来触发 textarea以外的所有形式的孩子的事件。

让我知道这是如何运作的。

Answer 2

严格来说，它不是有效的HTML，但它有效...您可以将div置于<button type="submit">内并删除按钮的默认样式。与给出的其他答案一样，div必须在form内部才能完成这项工作，而无需额外的JavScript。您也不再需要div上的tabindex。

<form>
<input/>
<button type="submit">
<div>
</div>
</button>
</form>

和

button[type="submit"] {
  border: none;
  background: none;
  padding: 0;
  margin: 0;
  display: block;
}

https://jsfiddle.net/g2j2c0ra/2/

Answer 3

只需为表单命名（例如id="test“），然后使用以下代码仅提交具有给定ID的表单：

$(function(){
 $("#test").keypress(function (e) {
    if (e.keyCode == 13) {
        alert('submitted');
        return false
    }
 });
});

当焦点不在输入中时，允许在ENTER上提交FORM

3 个答案: