Emscripten: text input with HTML <input> element

os/emscripten/shell.html

@@ -81,6 +81,13 @@
         padding: 4px 4px;
       }
 
+      div.textinput {
+        position: absolute;
+        width: 100%;
+        z-index: 4;
+        display: "none";
+      }
+
       canvas.emscripten {
         border: 0px none;
         height: 100%;
@@ -108,6 +115,10 @@
         Warning: savegames are stored in the Indexed DB of your browser.<br/>Your browser can delete savegames without notice!
       </div>
     </div>
+    <div class="textinput" id="textinput">
+      <input type="textinput" id="textinputbox" value=""></input>
+      <input type="submit" value="OK" onclick="Module.finishTextInput();" ></input>
+    </div>
     <div>
       <canvas class="emscripten" id="canvas" oncontextmenu="event.preventDefault()" tabindex=-1></canvas>
     </div>
@@ -200,7 +211,34 @@
               document.getElementById("filesystem").style.display = "none";
             }, 300);
           }, 10000);
-        }
+        },
+
+        textInputValue: null,
+
+        startTextInput: function(text) {
+          Module.print("Start text input!");
+          Module.textInputValue = null;
+          document.getElementById("textinput").style.display = "block";
+          document.getElementById("textinputbox").value = text;
+          document.getElementById("textinputbox").focus();
+        },
+
+        getTextInput: function() {
+          if (Module.textInputValue !== null) {
+            var value = Module.textInputValue;
+            Module.textInputValue = null;
+            return value;
+          }
+          return null;
+        },
+
+        finishTextInput: function() {
+          Module.print("Text input finished!");
+          Module.textInputValue = document.getElementById("textinputbox").value;
+          Module.print(Module.textInputValue);
+          document.getElementById("textinput").style.display = "none";
+        },
+
       };
 
       window.onerror = function() {

src/misc_gui.cpp

@@ -38,6 +38,9 @@
 #ifdef __ANDROID__
 #include <SDL_screenkeyboard.h>
 #endif
+#ifdef __EMSCRIPTEN__
+#include <emscripten.h>
+#endif
 
 /** Method to open the OSK. */
 enum OskActivation {
@@ -47,8 +50,9 @@ enum OskActivation {
 	OSKA_IMMEDIATELY,        ///< Focusing click already opens OSK.
 };
 
+#ifdef __ANDROID__
 static char _android_text_input[512];
-
+#endif
 
 static const NWidgetPart _nested_land_info_widgets[] = {
 	NWidget(NWID_HORIZONTAL),
@@ -831,6 +835,25 @@ void QueryString::HandleEditBox(Window *w, int wid)
 		}
 	}
 #endif
+#ifdef __EMSCRIPTEN__
+	// TODO: move this code to SDL2 Emscripten backend
+	if (w->IsWidgetFocused(wid)) {
+		char buf[512] = "";
+		int status = EM_ASM_INT({
+			var value = Module.getTextInput();
+			if (value == null) {
+				return 0;
+			}
+			var lengthBytes = Math.min(512, lengthBytesUTF8(value) + 1);
+			stringToUTF8(value, $0, lengthBytes);
+			return 1;
+		}, buf);
+		if (status) {
+			this->text.Assign(buf);
+			w->OnEditboxChanged(wid);
+		}
+	}
+#endif
 }
 
 void QueryString::DrawEditBox(const Window *w, int wid) const
@@ -1019,6 +1042,13 @@ void QueryString::ClickEditBox(Window *w, Point pt, int wid, int click_count, bo
 	this->text.DeleteAll();
 	SDL_ANDROID_GetScreenKeyboardTextInputAsync(_android_text_input, sizeof(_android_text_input));
 #endif
+#ifdef __EMSCRIPTEN__
+	// TODO: move this code to SDL2 Emscripten backend
+	EM_ASM({
+		Module.startTextInput(UTF8ToString($0));
+	}, this->text.buf);
+	this->text.DeleteAll();
+#endif
 }
 
 /** Class for the string query window. */