Instrument readouts and controls

Touch Keyboard <smart-touch-keyboard>

TouchKeyboard is the on-screen keyboard for a panel PC that has none, or a kiosk browser whose system keyboard covers the field it types into.

<smart-touch-keyboard> · 9 properties, 2 methods, 3 events · source/modules/smart.touchkeyboard.js

Usage in React

The React wrapper is the TouchKeyboard component: every property is a prop, every event a prop named on<Event> that receives the CustomEvent, and the methods are called on the element through a ref.

import { TouchKeyboard } from 'smart-industrial/react/touchkeyboard';

const ref = useRef<TouchKeyboard>(null);

<TouchKeyboard ref={ref} layout={'qwertz'}
    onAccept={(event: CustomEvent) => console.log(event.detail)} />

// methods are called on the wrapper the ref holds, which calls the element
ref.current?.open(null);

Properties

Prop	Type, default	Description
layout	TouchKeyboardLayout qwerty	Sets or retrieves the letters: qwerty, qwertz with the German letters, or azerty with the French ones.
target	string | null	Sets or retrieves the field to type into, as an element or a selector - or a form or any other container, whose fields the keyboard serves, following focus among them and no others. Two keyboards on one page are kept apart this way. A number field named here is typed over when it is touched afresh, as one found through autoAttach is.
autoAttach	boolean false	Sets or retrieves whether the keyboard follows focus, typing into whichever text field on the page was last focused.
mode	TouchKeyboardMode inline	Sets or retrieves where the keyboard sits: in the page; beside the field touched, under it or over it where the screen has no room (popup); or across the bottom of the screen (docked), where a dialog the field is in moves up above the keys. A popup or docked keyboard follows focus and shows only while a field is being typed into.
keypad	TouchKeyboardKeypad auto	Sets or retrieves when the keypad replaces the letters: for number, decimal and phone fields (by type or inputmode), always, or never.
opened	boolean false	Sets or retrieves whether a popup or docked keyboard is showing.
value	string	Sets or retrieves what the keyboard has typed when there is no field.
masked	boolean false	Sets or retrieves whether the preview is masked. A password field is masked anyway.
showPreview	boolean true	Sets or retrieves whether the line naming the field, and what it holds, is shown above the keys.

Methods

Method	Description
open(field?: HTMLElement): void	Shows a popup or docked keyboard for a field, or for the one it follows. field HTMLElement The field to type into.
close(): void	Puts a popup or docked keyboard away, raising close.

Events

The data of an event is in event.detail. change reports a key the touch keyboard has already added to value and fires only when no field is attached; accept follows Enter once the text is in the field or in value. In popup and docked mode the keyboard closes itself and then raises close; in inline mode close is a request and the application hides the keyboard.

Event	Description and detail
onAccept accept	This event is triggered by Enter in a one-line field, which also raises the field's keydown and keyup of Enter and its change event (a numeric text box commits on them), and submits the field's form as a keyboard's Enter would - through its default button, or with none when the field is its only one-line field - and puts a popup or docked keyboard away. In a text area Enter starts a new line instead. A number outside the field's range is not accepted: the keyboard stays up and says so. value string The value of the field, or of the keyboard when there is no field.
onChange change	This event is triggered when the keyboard's own value changes, when there is no field. With a field, listen to the field's input event. value string The new value.
onClose close	This event is triggered when the keyboard is put away - by Done, Escape, Enter or a touch elsewhere - or, in the page, by the hide key or Escape, for the application to decide.

Types

type TouchKeyboardLayout

'qwerty' | 'qwertz' | 'azerty'

type TouchKeyboardMode

'inline' | 'popup' | 'docked'

type TouchKeyboardKeypad

'auto' | 'always' | 'never'

CSS variables

The component declares 3 CSS variables; the CSS page shows how to set them.

--smart-touch-keyboard-key-height --smart-touch-keyboard-gap --smart-touch-keyboard-mono