Public
Edited
Jan 19, 2024
7 stars
viewof keys = {
let e = html`<div class='target' tabIndex=1>Keyboard target</div>`;
let keys = [];
e.value = keys;
let gap = new Date();
e.addEventListener("keyup", evt => {
keys.push({ key: evt.key, delay: new Date() - gap });
gap = new Date();
e.dispatchEvent(new CustomEvent("input"));
});
return e;
}
keys.map(k => k.key)
lastNumberTyped = {
let n = "";
for (let i = keys.length - 1; i > 0; i--) {
if (keys[i].key.match(/[0-9]/)) {
n = keys[i].key + n;
} else {
break;
}
}
return n;
}
html`<style>
.target:after {
content:' (Click to focus)';
}
.target {
padding: 5px;
color: #aaa;
}
.target:focus {
color: #000;
}
.target:focus:after {
display: none;
}
</style>`
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
