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 Vue

Vue uses the custom element directly. A property is bound with :kebab-name; an array or an object needs the .prop modifier so that Vue sets the property rather than an attribute. Events are listened to with @eventName; methods are called on the element through a template ref.

import 'smart-industrial/source/modules/smart.touchkeyboard.js';

<smart-touch-keyboard ref="touchKeyboard" :layout="'qwertz'"
    @accept="onEvent"></smart-touch-keyboard>

// methods are called on the element the ref holds
touchKeyboard.value.open(null);

// an array or an object is set as a property, not converted to an attribute: use .prop
<smart-touch-keyboard :items.prop="items"></smart-touch-keyboard>

Properties

Binding	Type, default	Description
:layout layout	TouchKeyboardLayout qwerty	Sets or retrieves the letters: qwerty, qwertz with the German letters, or azerty with the French ones.
:target 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.
:auto-attach autoAttach	boolean false	Sets or retrieves whether the keyboard follows focus, typing into whichever text field on the page was last focused.
:mode 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 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 opened	boolean false	Sets or retrieves whether a popup or docked keyboard is showing.
:value value	string	Sets or retrieves what the keyboard has typed when there is no field.
:masked masked	boolean false	Sets or retrieves whether the preview is masked. A password field is masked anyway.
:show-preview 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
@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.
@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.
@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