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 Blazor

The Razor component is <TouchKeyboard> in Smart.Blazor.Industrial: every property is a parameter in PascalCase, every event an EventCallback<Event> named On<Event> whose ev["Detail"] is the typed detail class, and the methods are called on the @ref. String choices are enums. In a Blazor Web App (.NET 8 and later) the page needs an interactive render mode, for example @rendermode InteractiveServer; a statically rendered component stays empty.

@using Smart.Blazor.Industrial
@* .NET 8 and later: an interactive render mode, on the page or for the whole app *@
@rendermode InteractiveServer

<TouchKeyboard @ref="touchKeyboard" Layout="qwertz"
    OnAccept="OnAccept" />

@code {
    TouchKeyboard touchKeyboard;

    void OnAccept(Event ev)
    {
        TouchKeyboardAcceptEventDetail detail = ev["Detail"];
    }

    // void Open()
    void Call() => touchKeyboard.Open();
}

Properties

Parameter	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	object	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 autoAttach	bool 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.
IsOpened opened	bool 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	bool false	Sets or retrieves whether the preview is masked. A password field is masked anyway.
ShowPreview showPreview	bool true	Sets or retrieves whether the line naming the field, and what it holds, is shown above the keys.

Methods

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

Events

Every event is an EventCallback<Event>; Event is a dictionary and ev["Detail"] converts to the detail class named under the event.

Event	Description and detail
OnAccept accept TouchKeyboardAcceptEventDetail	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 TouchKeyboardChangeEventDetail	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 no detail	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

enum TouchKeyboardLayout

TouchKeyboardLayout.Qwerty "qwerty" TouchKeyboardLayout.Qwertz "qwertz" TouchKeyboardLayout.Azerty "azerty"

enum TouchKeyboardMode

TouchKeyboardMode.Inline "inline" TouchKeyboardMode.Popup "popup" TouchKeyboardMode.Docked "docked"

enum TouchKeyboardKeypad

TouchKeyboardKeypad.Auto "auto" TouchKeyboardKeypad.Always "always" TouchKeyboardKeypad.Never "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