Fix keyboard on ios, fixes #105

debug.html

@@ -185,9 +185,11 @@
 <div id="screen_container" style="display: none">
     <div id="screen"></div>
     <canvas id="vga"></canvas>
-</div>
 
-<input type="text" class="phone_keyboard" style="display: none">
+    <div style="position: absolute; top: 0; z-index: 10">
+        <textarea class="phone_keyboard"></textarea>
+    </div>
+</div>
 
 <div id="runtime_infos" style="display: none">
     Running: <span id="running_time">0s</span> <br>

index.html

@@ -156,11 +156,12 @@
 <div id="screen_container" style="display: none">
     <div id="screen"></div>
     <canvas id="vga"></canvas>
+    <div style="position: absolute; top: 0; z-index: 10">
+        <textarea class="phone_keyboard"></textarea>
+    </div>
 </div>
 
 
-<input type="text" class="phone_keyboard" style="display: none">
-
 <div id="runtime_infos" style="display: none">
     Running: <span id="running_time">0s</span> <br>
     Speed: <span id="speed">0</span>kIPS<br>

src/browser/main.js

@@ -787,8 +787,6 @@
         $("runtime_infos").style.display = "block";
         $("screen_container").style.display = "block";
 
-        document.getElementsByClassName("phone_keyboard")[0].style.display = "block";
-
         if(settings.filesystem)
         {
             init_filesystem_panel(emulator);
@@ -1197,6 +1195,19 @@
             }
         };
 
+        const phone_keyboard = document.getElementsByClassName("phone_keyboard")[0];
+
+        phone_keyboard.setAttribute("autocorrect", "off");
+        phone_keyboard.setAttribute("autocapitalize", "off");
+        phone_keyboard.setAttribute("spellcheck", "false");
+        phone_keyboard.tabIndex = 0;
+
+        $("screen_container").addEventListener("mousedown", (e) =>
+        {
+            e.preventDefault();
+            phone_keyboard.focus();
+        }, false);
+
         $("take_screenshot").onclick = function()
         {
             emulator.screen_make_screenshot();

src/browser/screen.js

@@ -22,7 +22,7 @@ function ScreenAdapter(screen_container, bus)
         graphic_screen = screen_container.getElementsByTagName("canvas")[0],
         graphic_context = graphic_screen.getContext("2d"),
 
-        text_screen = graphic_screen.nextElementSibling || graphic_screen.previousElementSibling,
+        text_screen = screen_container.getElementsByTagName("div")[0],
         cursor_element = document.createElement("div");
 
     var

v86.css

@@ -57,9 +57,13 @@ a {
     width: 0;
     height: 0;
     resize: none;
-    border: 0;
-    padding: 0;
     position: absolute;
+    opacity: 0;
+    left: -9999em;
+    top: 0;
+    z-index: -10;
+    white-space: nowrap;
+    overflow: hidden;
 }
 h4 {
     margin: 0px 0px 20px 0px;