j-Textbox

jComponent 20 · jcomponent@20 component Voorbeeld geladen met jComponent 20

Configuratie:

type {String} (optional) kan email, phone, password, date, number, search, lower, upper of leeg zijn (default)
required {Boolean} (optional) maakt het mogelijk om "verplicht" te zijn (default: false)
icon {String} (optional) icon voor etiket bijvoorbeeld home, cog, enz.
icon2 {String} (optional) icoon in de rechterkant bijvoorbeeld home, cog, enz.
label {String} (optional) label (de standaard is HTML-inhoud)
autofocus {Boolean} (optional) richt de input op (default: false)
align {String} (optional) left (default), right of center
autofill {Boolean} (optional) maakt de autofillfunctie van de browser mogelijk (default: false)
placeholder {String} (optional) voegt een placeholder tekst toe aan de input
maxlength {Number} (optional) bepaalt een maximale lengte van de banden
minlength {Number} (optional) stelt een minimumduur van de banden vast
validation {String} (optional) een voorwaarde voor evaluation bijvoorbeeld value.match(/[a-z]+/) !== null
format {String} (optional) output formatting bijvoorbeeld voor data (default: yyyy-MM-dd)
increment {Boolean} (optional) zorgt voor controles voor het verhogen van cijfers (default: false)
keypress {Boolean} (optional) kan in realtime bindende waarden uitschakelen (default: true)
delay {Number} (optional) kan de vertraging verhogen/verlagen voor real-time binding (default: 300 ms)
disabled {Boolean} (optional) dekt deze component uit
error {String} (optional) voegt een string tekst toe onder de invoer
iconclick {String} (optional) moet een link naar een functie bevatten
autocomplete {String} (optional) moet een link naar een functie bevatten, wordt uitgevoerd op het evenement focus
spaces {Boolean} (optional) maakt ruimte mogelijk anders verwijdert het ze (default: true)
readonly {Boolean} optie, standaard false
NEW innerlabel {Boolean} optioneel, de interne etikettering mogelijk maakt (default: true)

Interessant is:

type:date gebruikt de calendar component

Gebruik het met <ui-component name="textbox">Wanneer de component nog niet is geladen, jComponent Download het op eerste gebruik van het adres in DEF.fallback (De Componentator Schrijver: Peter Širka. bron: de Componentator Componenten repository, MIT licentie.

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>