@@ -26,7 +26,7 @@ class HtmlTerminal {
2626 * @private
2727 * @type {HTMLElement }
2828 */
29- #$prompt = undefined ;
29+ #$prompt;
3030
3131 /**
3232 * Constructor
@@ -45,13 +45,18 @@ class HtmlTerminal {
4545 this . $output . classList . add ( 'terminal' ) ;
4646
4747 // Create a prompt element.
48- // This element gets added if input is needed
49- this . #$prompt = document . createElement ( "span " ) ;
48+ // This element gets added if input is needed.
49+ this . #$prompt = document . createElement ( "input " ) ;
5050 this . #$prompt. setAttribute ( "id" , "prompt" ) ;
51- this . #$prompt. innerText = "" ;
52-
53- //TODO: this handler shouls be only on the propt element and only active if cursor is visible
54- document . addEventListener ( "keyup" , this . #handleKey. bind ( this ) ) ;
51+ this . #$prompt. setAttribute ( "type" , "text" ) ;
52+ this . #$prompt. setAttribute ( "length" , "50" ) ;
53+ this . #$prompt. addEventListener ( "keydown" , this . #handleKey. bind ( this ) ) ;
54+
55+ // Force focus on the promt on each click.
56+ // This is needed for mobile support.
57+ document . body . addEventListener ( 'click' , ( ) => {
58+ this . #$prompt. focus ( ) ;
59+ } ) ;
5560 }
5661
5762 /**
@@ -77,37 +82,16 @@ class HtmlTerminal {
7782 * @param {* } e
7883 */
7984 #handleKey( e ) {
80- // if no input-callback is defined
85+ // if no input-callback is defined just return
8186 if ( ! this . #inputCallback) {
8287 return ;
8388 }
8489
85- if ( e . keyCode === 13 /* ENTER */ ) {
86- // create a new line with the text input and remove the prompt
87- const text = this . #$prompt. innerText ;
88- this . write ( text + "\n" ) ;
89- this . #$prompt. innerText = "" ;
90+ if ( e . keyCode == 13 ) {
91+ const text = this . #$prompt. value ;
92+ this . #$prompt. value = '' ;
9093 this . #$prompt. remove ( ) ;
91-
92- // return the inputed text
93- this . #inputCallback( text ) ;
94-
95- // remove the callback and the key handler
96- this . #inputCallback = undefined ;
97- } else if ( e . keyCode === 8 /* BACKSPACE */ ) {
98- this . #$prompt. innerText = this . #$prompt. innerText . slice ( 0 , - 1 ) ;
99- } else if (
100- e . keyCode == 16 // "Shift"
101- || e . keyCode == 17 // "Control"
102- || e . keyCode == 20 // "CapsLock"
103- || ! e . key . match ( / ^ [ a - z 0 - 9 ! " § # $ % & ' ( ) * + , . \/ : ; < = > ? @ \[ \] ^ _ ` { | } ~ - ] $ / i)
104- ) {
105- // ignore non-visible characters
106- return e ;
107- } else {
108- this . #$prompt. innerHtml = '' ;
109- const key = e . shiftKey ? e . key . toUpperCase ( ) : e . key ;
110- this . #$prompt. innerText = this . #$prompt. innerText + key ;
94+ this . #inputCallback( text + '\n' ) ;
11195 }
11296 }
11397
@@ -122,7 +106,7 @@ class HtmlTerminal {
122106 }
123107
124108 /**
125- * TODO:
109+ * Create a new div and add html content.
126110 *
127111 * @public
128112 * @param {* } htmlContent
@@ -189,7 +173,8 @@ class HtmlTerminal {
189173 */
190174 input ( callback ) {
191175 // show prompt with a blinking prompt
192- this . $output . appendChild ( this . #$prompt) ;
193176 this . #inputCallback = callback ;
177+ this . $output . appendChild ( this . #$prompt) ;
178+ this . #$prompt. focus ( ) ;
194179 }
195180}
0 commit comments