for username/email input field in login form, automatically resize so also longer addresses are fully visible

feedback from jsfan3 in issue #58, thanks!
This commit is contained in:
Mechiel Lukkien
2024-01-08 21:59:15 +01:00
parent c348834ce9
commit 2392f79aa9
5 changed files with 27 additions and 4 deletions

View File

@ -9,6 +9,7 @@ const login = async (reason: string) => {
const origFocus = document.activeElement
let reasonElem: HTMLElement
let fieldset: HTMLFieldSetElement
let autosize: HTMLElement
let username: HTMLInputElement
let password: HTMLInputElement
@ -52,7 +53,14 @@ const login = async (reason: string) => {
dom.label(
style({display: 'block', marginBottom: '2ex'}),
dom.div('Email address', style({marginBottom: '.5ex'})),
username=dom.input(attr.required(''), attr.placeholder('jane@example.org')),
autosize=dom.span(dom._class('autosize'),
username=dom.input(
attr.required(''),
attr.placeholder('jane@example.org'),
function change() { autosize.dataset.value = username.value },
function input() { autosize.dataset.value = username.value },
),
),
),
dom.label(
style({display: 'block', marginBottom: '2ex'}),