Live text input

Tweakpane sets the value of a text input on Enter or when it loses focus. With liveUpdate: true, it sets the value on each key too, with last: false until the edit ends.

Setup, Tweakpane

import {UI} from 'uiconfig-tweakpane'
import 'uiconfig-tweakpane/theme.css'

// the panel goes into this element (without one, it floats at the top right)
const ui = new UI(document.getElementById('panel'))
ui.setTheme('light') // a mode of theme.css

// this page prints the log under the panel
const log = console.log

Setup, Blueprint

import {UI} from 'uiconfig-blueprint'

// the panel goes into this element (without one, it floats at the top right)
const ui = new UI(document.getElementById('panel'))

// this page prints the log under the panel
const log = console.log

live-update.js

const search = {onEnter: '', live: ''}

const config = {
    type: 'folder',
    label: 'Search',
    expanded: true,
    children: [
        {
            type: 'input',
            label: 'On Enter',
            property: [search, 'onEnter'],
            placeholder: 'type, then press Enter',
        },
        {
            type: 'input',
            label: 'Live',
            property: [search, 'live'],
            placeholder: 'each key',
            liveUpdate: true,
        },
        {type: 'monitor', label: 'Live value', property: [search, 'live']},
    ],
    onChange: (ev) => {
        log(`${ev.config.label}: "${ev.value}", last: ${ev.last}`)
        config.uiRefresh(true)
    },
}

ui.appendChild(config)

Blueprint text inputs always set the value on each key, so the two inputs act the same there.

Log