HTML表单onsubmit无法在具有隐藏提交按钮和只读输入的某些浏览器上触发

Question

我正在设计一个表单，在键盘上按“Enter”时触发onsubmit，并且根据表单中的字段，事件不会在某些浏览器上触发。

以下是触发和不触发submit的表单的一些最小工作示例。

Firefox，Chrome和Opera对以下表单感到满意，但Internet Explorer 11和Safari 11不会在第三种表单上触发onsubmit。

表格1：

<form>
    <input type="text">
    <input type="submit" style="display:none;">
</form>

表格2：

<form>
    <input type="text">
    <input readonly>
    <input type="submit">
</form>

表格3（有问题）：

<form>
    <input type="text">
    <input readonly>
    <input type="submit" style="display:none;">
</form>

如果在保持隐藏提交按钮而不使用hacky keypress事件处理程序的情况下按“Enter”，我如何让第三个表单在这些浏览器上触发submit？解释为什么第三种形式未能触发事件将是非常有用的。

为方便起见，

Here是一个JSFiddle。

编辑：相关问题的已接受解决方案在提交按钮上设置了display: none，这在Safari / IE中无法解决此问题。

Answer 1

使用visibility: hidden代替display: none，因为display: none元素不会收到事件

或者使用不透明度并将其绝对定位在屏幕外，这样它就不会占用任何空间而且不会出现在屏幕上

opacity: 0;
position: absolute;
left: -3000px;