keyMapInput selection

app.js

@@ -350,6 +350,24 @@ function pause() {
 
 settingsButton.onclick = showSettings
 
+keyMapInput.onclick =  keyMapInput.onkeyup = function(event) {
+    let cursorPosition = keyMapInput.selectionEnd
+    keyMapInput.setSelectionRange(cursorPosition-1, cursorPosition)
+}
+
+keyMapInput.onchange = function(event) {
+    keyMap = keyMapInput.value
+    if (midiKeyboard) {
+        cannonSprites.forEach((cannonSprite, index) => {
+            cannonSprite.key = NOTE_NAMES[index % NOTE_NAMES.length]
+        })
+    } else {
+        cannonSprites.forEach((cannonSprite, index) => {
+            cannonSprite.key = keyMap[index - FIRST_NOTE].toUpperCase()
+        })
+    }
+}
+
 var midiIputs
 var midiKeyboard = window.localStorage.midiKeyboard || ""
 midiSelect.onfocus = function() {
@@ -385,21 +403,13 @@ midiSelect.oninput = () => {
     window.localStorage.midiKeyboard = midiKeyboard
 }
 
-keyMapInput.onclick=()=>{
+function onMIDIMessage(event) {
-    let cursorPosition = keyMapInput.selectionStart
+    let [code, note, velocity] = event.data
-    keyMapInput.setSelectionRange(cursorPosition-1, cursorPosition)
-}
 
-keyMapInput.onchange = function(event) {
+    if (144 <= code && code <= 159 && cannonSprites[note]) {
-    keyMap = keyMapInput.value
+        cannonSprites[note].shooting = true
-    if (midiKeyboard) {
+    } else if (128 <= code && code <= 143 && cannonSprites[note]) {
-        cannonSprites.forEach((cannonSprite, index) => {
+        cannonSprites[note].shooting = false
-            cannonSprite.key = NOTE_NAMES[index % NOTE_NAMES.length]
-        })
-    } else {
-        cannonSprites.forEach((cannonSprite, index) => {
-            cannonSprite.key = keyMap[index - FIRST_NOTE].toUpperCase()
-        })
     }
 }
 
@@ -422,16 +432,6 @@ function onpartialinput() {
     }
 }
 
-function onMIDIMessage(event) {
-    let [code, note, velocity] = event.data
-
-    if (144 <= code && code <= 159 && cannonSprites[note]) {
-        cannonSprites[note].shooting = true
-    } else if (128 <= code && code <= 143 && cannonSprites[note]) {
-        cannonSprites[note].shooting = false
-    }
-}
-
 let level
 function newGame() {
     level = 0

style.css

@@ -53,6 +53,11 @@ h1 {
     width: calc(25em + 108px);
     height: 54px;
     font-size: 16px;
+    caret-color: transparent;
+}
+
+#keyMapInput::selection {
+    color: #209cee;
 }
 
 #keyMapInput,