Option for using TextFieldInput class instead of TextField

Author: ypiguet-epfl

block-library-dev.md

@@ -649,3 +649,4 @@ VPL is started by code in a "load" event listener defined in vpl-main.js. Some c
 - `window["vplConfig"]`: can be set to configuration options: `"ignoredCommands"` is an array of command ids which are discarded and not available in the configuration mode
 - `window["vplConvertToHTML"]`: `function(json, isVPL3UI)` to convert the content of a .vpl3 (if `isVPL3UI` is false) or a .vpl3ui file (if `isVPL3UI` is true) to a static HTML file
 - `window["vplConvertMDToHtml"]`: `function(md)` to convert simple markdown to an html fragment (block-level elements such as h1, p, etc.)
+- `window["vplTextFieldInputEvents"]`: `true` to use `input` events of an invisible `<input>` element for text field input; `false` to use `keydown` events; default is `true` for Android, `false` for other platforms

index-classic-template.html

@@ -236,6 +236,7 @@
 <script src="src/vpl-dynamic-help.js"></script>
 <script src="src/vpl-keyboard.js"></script>
 <script src="src/vpl-textfield.js"></script>
+<script src="src/vpl-textfield-input.js"></script>
 <script src="src/vpl-kbd-control.js"></script>
 <script src="src/vpl-main.js"></script>
 

index-svg-template.html

@@ -322,6 +322,7 @@
 <script src="src/vpl-dynamic-help.js"></script>
 <script src="src/vpl-keyboard.js"></script>
 <script src="src/vpl-textfield.js"></script>
+<script src="src/vpl-textfield-input.js"></script>
 <script src="src/vpl-kbd-control.js"></script>
 <script src="src/vpl-main.js"></script>
 

src/vpl-app.js

@@ -325,7 +325,9 @@ A3a.vpl.Application.prototype.startTextField = function (options) {
 		}
 		this.textField.finish(true);
 	}
-	this.textField = new A3a.vpl.TextField(this, options);
+	this.textField = window["vplTextFieldInputEvents"]
+		? new A3a.vpl.TextFieldInput(this, options)
+		: new A3a.vpl.TextField(this, options);
 };
 
 /** Translate message using the current language

src/vpl-main.js

@@ -227,6 +227,13 @@ function vplGetHashOption(key) {
 	@return {void}
 */
 function vplSetup(gui, rootDir) {
+
+	// platform-specific options
+	if (window["vplTextFieldInputEvents"] === undefined) {
+		// true on Android, false elsewhere
+		window["vplTextFieldInputEvents"] = navigator.userAgent.indexOf("Android") >= 0;
+	}
+
 	// handle overlays in gui
 	/** @type {Array.<Object>} */
 	var helpFragments = [];