an append only list
keep input focused
Michael Yang
(Jun 12, 2026, 5:09 PM -0700)
927809bf
4f40a864
+18
-3
+18
-3
js/index.ts
+18
-3
js/index.ts
···
4
4
const list = document.getElementById("list") as HTMLUListElement
5
5
const input = document.getElementById("new-item-text") as HTMLInputElement
6
6
const form = document.getElementById("new-item-form") as HTMLFormElement
7
-
8
-
const request = window.indexedDB.open("list", 1)
7
+
input.focus()
9
8
10
9
form.onsubmit = (event) => {
11
-
event.preventDefault()
10
+
event.preventDefault() // prevent a page refresh
11
+
if (input.value === '') return
12
12
const listItem = document.createElement("li")
13
13
listItem.textContent = input.value
14
14
list.appendChild(listItem)
15
+
input.value = ""
16
+
}
17
+
18
+
document.onkeydown = (event) => {
19
+
// refocus and put cursor at end of input on any alphanumeric keydown
20
+
if (/^[a-z:0-9_]+$/i.test(event.key)) {
21
+
console.log(event.key)
22
+
input.focus()
23
+
input.setSelectionRange(input.value.length, input.value.length)
24
+
}
25
+
}
26
+
27
+
input.onblur = () => {
28
+
input.focus() // never lose focus
29
+
input.setSelectionRange(input.value.length, input.value.length)
15
30
}
16
31
}