j-Textbox

jComponent 20 · jcomponent@20 component Beispiel mit jComponent 20 geladen

Konfiguration:

type {String} (optional) kann email, phone, password, date, number, search, lower, upper oder leer sein (Standard)
required {Boolean} (optional) aktiviert „erforderlich“ (Standard: false)
icon {String} (optional) Symbol für Beschriftung, z.B. home, cog usw.
Symbol icon2 {String} (optional) im rechten Feld, z. B. home, cog usw.
Label label {String} (optional) (Standard ist HTML-Inhalt)
autofocus {Boolean} (optional) fokussiert die Eingabe (Standard: false)
align {String} (optional) left (Standard), right oder center
autofill {Boolean} (optional) aktiviert die Autofill-Funktion des Browsers (Standard: false)
placeholder {String} (optional) fügt der Eingabe einen placeholder-Text hinzu
maxlength {Number} (optional) legt eine maximale Länge von Zeichen fest
minlength {Number} (optional) legt eine Mindestlänge von Zeichen fest
validation {String} (optional) eine Bedingung für evaluation, z.B. value.match(/[a-z]+/) !== null
format {String} (optional) Ausgabeformatierung z.B. für Datumsangaben (Standard: yyyy-MM-dd)
increment {Boolean} (optional) ermöglicht Steuerelemente zum Erhöhen von Zahlen (Standard: false)
keypress {Boolean} (optional) kann Echtzeit-Bindungswerte deaktivieren (Standard: true)
delay {Number} (optional) kann die Verzögerung für die Echtzeitbindung erhöhen/verringern (Standard: 300 ms)
disabled {Boolean} (optional) deaktiviert diese Komponente
error {String} (optional) fügt einen string-Text unter der Eingabe hinzu
iconclick {String} (optional) muss einen Link zu einer Funktion enthalten
autocomplete {String} (optional) muss einen Link zu einer Funktion enthalten und wird beim Ereignis focus ausgelöst
spaces {Boolean} (optional) aktiviert Leerzeichen, andernfalls werden sie entfernt (Standard: true)
readonly {Boolean} optional, Standard false
NEU innerlabel {Boolean} optional, aktiviert Innenetikett (Standard: true)

Interessant:

type:date verwendet die Komponente calendar

Verwenden Sie es mit <ui-component name="textbox">. Wenn die Komponente noch nicht geladen ist, lädt jComponent sie bei der ersten Verwendung von der Adresse in DEF.fallback herunter (standardmäßig das CDN Componentator). Autor: Peter Širka. Quelle: Componentator-Komponenten-Repository, MIT-Lizenz.

example.html

<div style="width:400px">
	<ui-component name="textbox" path="form.name" config="required:true;placeholder:Your name;icon2:pencil;error:Please enter your name">Name</ui-component>
	<br />
	<ui-component name="textbox" path="form.email" config="required:true;type:email;autofill:email;icon:envelope;error:E-mail must be in format email@domain.com">E-mail</ui-component>
	<br />
	<ui-component name="textbox" path="form.password" config="type:password">Password</ui-component>
	<br />
	<ui-component name="textbox" path="form.note">Note</ui-component>
	<br />
	<ui-component name="textbox" path="form.phone" config="type:phone">Phone</ui-component>
	<br />
	<ui-component name="textbox" path="form.age" config="type:number;increment:true">Age</ui-component>
	<br />
	<ui-component name="textbox" path="form.search" config="type:search">Search</ui-component>
	<hr />
	<h2>Inner label</h2>
	<ui-component name="textbox" path="form.name" config="required:true;innerlabel:true;placeholder:Your name;icon2:pencil;error:Please enter your name">Name</ui-component>
</div>

<script>
	var form = {};
	form.email = '@';
	form.age = 30;
</script>