<input>

<input> is a text field the player can type into — a search box, a rename prompt, a chat line.

src/chat.ts2

<input x={4} y="center" w={{ fill: 8 }} h={16} font={Fonts.PLAIN}
       text="selling rune scimitar" valign="middle" shadow

Reference

<input>

Props

<input> accepts all common props, plus everything <text> accepts — text, font, color, align, valign, shadow, lineHeight, altText — and:

• focus: A boolean. Whether this field has the caret when the interface opens. A field without focus does not receive typing.
• selectColor: A number, as 0xRRGGBB. Colour of selected text.
• selectBgColor: A number. Background behind selected text.
• promptColor: A number. The caret’s colour.
• lineWrapWidth: A number. Width at which the text wraps.
• lineCountLimit: A number. Maximum number of lines.
• lineWidthLimit: A number. Maximum characters per line.
• deferred: A boolean. Leave the definition’s value for this field’s state-reading props until the state first moves — see common props.

Caveats

• An <input> needs a font (TS2E219).
• What the player types stays in the field. text is the initial contents, and it is written, never read: ref.text is refused (TS2E003). For a value the panel uses, hear the keys with onKey and build the value in a cell — Keyboard and input.
• Only one field can hold focus at a time.

refused/input-readback.ts2

<input ref={box} x={0} y={0} w="fill" h={16} text="" font={Fonts.PLAIN} color={Colors.WHITE} focus />
<text ref={echo} x={0} y={20} w="fill" h={16} text="?" font={Fonts.PLAIN} color={Colors.AMBER}
      onClick={() => { echo.text = box.text; }} />

Usage

A chat line

src/chat.ts2

<layer x={0} y={116} w="fill" h={22}>
  <SunkenBox>
    <input x={4} y="center" w={{ fill: 8 }} h={16} font={Fonts.PLAIN}
           text="selling rune scimitar" valign="middle" shadow
           color={Colors.YELLOW} promptColor={Colors.DIM}
           selectColor={Colors.WHITE} selectBgColor={0x3d5a8a}
           lineWidthLimit={40} focus />
  </SunkenBox>
</layer>

An <input> draws no border of its own.

A number the panel can read

src/entry.ts2

<text x={0} y={22} w="fill" h={16} text={`${amount}*`} font={Fonts.PLAIN}
      align="center" valign="middle" shadow color={Colors.WHITE}
      onKey={(event) => {

Not an <input> at all: a <text> with an onKey, drawing a cell the handler writes.

Troubleshooting

Nothing happens when I type

Check focus. A field without it does not receive keys, and only one field can have it.

The field is invisible

Check font. An <input> without one does not lay out.

I want to read what was typed

You cannot. Hear the keys with onKey on the element instead, and build the value in a cell — Keyboard and input shows the prompt.