HTML-Formular onsubmit schlägt auf bestimmten Browsern mit versteckten Übermittlungsschaltfläche und readonly Eingabe

Question

Ich entwerfe ein Formular zum Auslösen onsubmit durch Drücken von "Enter" auf der Tastatur, und das Ereignis wird nicht auf bestimmten Browsern abhängig davon ausgelöst Felder sind in der Form.

Hier sind einige minimale Arbeitsbeispiele für Formulare, die auslösen und nicht auslösen submit.

Firefox, Chrome und Opera sind mit den folgenden Formularen zufrieden, aber Internet Explorer 11 und Safari 11 werden onsubmit auf dem dritten Formular nicht auslösen.

Form 1:

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

Form 2:

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

Form 3 (abgehört):

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

Wie kann ich die dritte Form erhalten submit auszulösen auf diesen Browsern beim Drücken 'Enter', während der Submit Button ausgeblendet bleibt und kein hacky keypress Event-Handler verwendet wird? Eine Erklärung dafür, warum die dritte Form das Ereignis nicht auslöst, wäre sehr hilfreich.

Here ist ein JSFiddle für Ihre Bequemlichkeit.

Bearbeiten: Die akzeptierte Lösung der zugehörigen Frage setzt display: none auf die Schaltfläche Senden, die dieses Problem in Safari/IE nicht gelöst hätte.

Answer 1

Verwenden visibility: hidden statt display: none weil display: none Elemente erhalten keine Ereignisse

Oder Opazität verwenden und es absolut außerhalb des Bildschirms zu positionieren, so dass es keinen Platz in Anspruch nimmt und erscheint nicht auf dem Bildschirm

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