Textbox

Eine Textbox ermöglicht Benutzern die Eingabe und Bearbeitung von Text.

Textbox

New-UDTextbox -Label 'Standard' -Placeholder 'Textbox'
New-UDTextbox -Label 'Disabled' -Placeholder 'Textbox' -Disabled
New-UDTextbox -Label 'Textbox' -Value 'With value'

Textbox-Typen

Textboxen können umgestellt werden, um bestimmte Typen zu akzeptieren, wie Passwörter, Zahlen oder E-Mails.

Passwort-Typ

Eine Passwort-Textbox maskiert die Eingabe.

New-UDTextbox -Label 'Password' -Type password

Zahlen-Typ

Akzeptiert nur Zahlen. Einige Browser zeigen Pfeile nach oben und unten an, um den aktuellen Wert zu erhöhen und zu verringern.

New-UDTextbox -Label 'Number' -Type number -Minimum 10 -Maximum 10000 -Value 1234

Mehrzeilig

Sie können eine mehrzeilige Textbox mit dem Parameter -Multiline erstellen. Durch Drücken der Eingabetaste wird eine neue Zeile hinzugefügt. Sie können die Anzahl der Zeilen und die maximale Anzahl der Zeilen mit -Rows und -RowsMax festlegen.

New-UDTextbox -Multiline -Rows 4 -RowsMax 10

Interaktion

Abrufen eines Textbox-Werts

Sie können Get-UDElement verwenden, um den Wert einer Textbox abzurufen

New-UDTextbox -Id 'txtExample' 
New-UDButton -OnClick {
    $Value = (Get-UDElement -Id 'txtExample').value 
    Show-UDToast -Message $Value
} -Text "Get textbox value"

Festlegen des Textbox-Werts

New-UDTextbox -Id 'txtExample' -Label 'Label' -Value 'Value'

New-UDButton -OnClick {

    Set-UDElement -Id 'txtExample' -Properties @{
        Value = "test123"
    }

} -Text "Get textbox value"

Symbole

Sie können das Symbol einer Textbox mit dem Parameter -Icon und dem Cmdlet New-UDIcon festlegen.

New-UDTextbox -Id "ServerGroups" -Icon (New-UDIcon -Icon 'server') -Value "This is my server"

Maskierung

Sie können -MaskPattern verwenden, um eine Maske für die Textbox zu definieren. Im Folgenden finden Sie ein Beispiel für eine Textbox-Maske.

New-UDTextbox -Id 'textbox16' -MaskPattern '[phone]'

Die Definition kann Folgendes enthalten

• 0 - eine beliebige Ziffer
• a - ein beliebiger Buchstabe
• * - ein beliebiges Zeichen
• andere Zeichen, die nicht in benutzerdefinierten Definitionen enthalten sind, gelten als fixed
• [] - Eingabe optional machen
• {} - festen Teil im unmaskierten Wert einschließen
• ` - Zurückverschieben von Symbolen verhindern

Wenn ein Definitionszeichen als fest behandelt werden soll, muss es mit \\ escaped werden (z. B. \\0).

Die Maskierung für die Textbox wird durch imaskjs gesteuert.

OnEnter

Der Event-Handler -OnEnter wird ausgeführt, wenn der Benutzer im Textfeld die Eingabetaste drückt. Er ist nützlich, um beim Drücken der Eingabetaste andere Aktionen auszuführen, z. B. das Klicken auf eine Schaltfläche.

New-UDTextbox -OnEnter {
    Invoke-UDEndpoint -Id 'submit' -Session
}

New-UDButton -Id 'submit' -OnClick {
    Show-UDToast -Message 'From Textbox'
}

OnBlur

Der Event-Handler -OnBlur wird ausgeführt, wenn die Textbox den Fokus verliert.

New-UDTextbox -OnBlur {
    Show-UDToast "Blurred"
}

OnValidate

Verwenden Sie den Event-Handler -OnValidate, um die in der Textbox eingegebene Eingabe zu validieren.

New-UDTextbox -OnValidate {
    if ($EventData.Length -lt 10)
    {
        New-UDValidationResult -ValidationError 'String needs to be longer than 10'
    }
}

API

New-UDTextbox