Ich habe eine Art Chatbot im MSDOS-Terminal-Stil. Der Benutzer gibt seine Antwort ein und drückt dann die Eingabetaste. Ich habe festgestellt, dass, wenn ich die Schaltfläche mit "display: none;" Dadurch wird die Seite in mehreren Browsern neu geladen (mein Windows Chrome-Browser lädt nicht neu. Ich bin mir nicht sicher, warum). Wie kann ich den Button verstecken lassen und trotzdem Form und Code richtig funktionieren? Ich würde lieber nicht "position: absolute" verwenden. um es vom Bildschirm zu senden.

HTML:

<div id="bot"><form>
<input id="user-response" type="text" placeholder="" autocomplete="off" autofocus />
<button id="user-submit" type="submit">Send</button>
</form></div>

JAVASCRIPT:

$('#bot').on('click', '#user-submit', function(e) {
e.preventDefault();
message = $('#user-response').val();
message = message.toLowerCase();
sendUserResponse();
getBotResponse(message);
});

Ich habe verschiedene Rückgabetypen ausprobiert: false ;, event.preventDefault (); und so, aber alles funktioniert einwandfrei, solange ich display nicht anwende: none; Styling auf die Schaltfläche. Ich habe es auch in input geändert und type = "button" / type = "submit" aber wieder display: none; Lädt die Seite neu, wenn Sie die Eingabetaste drücken. Ich habe ungefähr 20 verschiedene Fragen auf Seite Reload OnClick Query Ajax usw. gelesen. Keine von ihnen scheint dieses Problem zu lösen.

BEARBEITEN

Verwenden Sie zwei der folgenden Vorschläge, um zu überprüfen, ob die Eingabetaste gedrückt wurde, um das Formular abzusenden. Sie weisen jedoch weiterhin dasselbe Fehlermuster auf. Mit Formular wird die Seite neu geladen, wenn die Übergabeschaltfläche wie folgt gestaltet ist: keine; Die folgenden Methoden funktionieren, wenn die Schaltfläche sichtbar angezeigt wird. Überprüft den Code auf Rückgabewerte, die möglicherweise zum Senden und erneuten Laden führen. Derzeit: Seite mit sichtbarer Schaltfläche - funktioniert mit jeder Methode. Seite mit Anzeige: keine Schaltfläche - Lädt die Seite nach allen angegebenen Methoden neu.

Wollen auch erwähnt werden, dass das Neuladen der Seite in Chrome 49.0.2623.87 für Windows 7 nicht vorhanden ist, jedoch in allen OS X-Browsern und einigen Windows-Browsern.

EDIT 2

Bug: Anzeige: keine; Schaltflächen führen zum erneuten Laden der Seite. Offenbar auf OS X-Browsern und einigen Windows. Lösung: Wechseln Sie zu vollständigen Ajax-Non-Formularen und lösen Sie alle Probleme. Wird eine funktionierende Ajax-Lösung veröffentlichen, wenn sie zusammengesetzt wird. Die richtige Antwort unten bezieht sich auf den Vorschlag von Ajax. Fehler bei Chrome Dev gemeldet und möglicherweise später bei Debs anderer Browser.