j-Textbox

jComponent 20 · jcomponent@20 component Příklad načten s jComponent 20

Konfigurace:

type {String} Opční může být email, phone, password, date, number, search, lower, upper nebo v praxi (default)
required {Boolean} (volitelně) umožňuje „potřebné“ (podmínkou: false)
icon {String} (volitelná) ikona pro štítky např. home, cog, atd.
icon2 {String} (volitelná) ikona v pravém krabici např. home, cog, atd.
label {String} (volitelné) štítky (default je obsah HTML)
autofocus {Boolean} (volitelně) se zaměřuje na vstup (předběžně: false)
align {String} (volitelné) left (předvolené), right nebo center
autofill {Boolean} (volitelně) umožňuje funkci autofillu prohlížeče (předběžně: false)
placeholder {String} (volitelně) přidává text placeholder do vstupu
maxlength {Number} (volitelně) stanoví maximální délku pneumatik
minlength {Number} (volitelně) stanoví minimální délku nádrží
validation {String} (volitelný) podmínka pro evaluation např. value.match(/[a-z]+/) !== null
format {String} (volitelné) formátování výstupu např. pro data (předběžně: yyyy-MM-dd)
increment {Boolean} (volitelně) umožňuje kontroly pro zvýšení počtu (podle předpokladu: false)
keypress {Boolean} (volitelně) může vypnout závazné hodnoty v reálném čase (předběžně: true)
delay {Number} (volitelně) může zvýšit/znížit zpoždění pro real-time závazek (default: 300 ms)
disabled {Boolean} (volitelně) zakazuje tuto složku
error {String} (volitelně) přidává text string pod vkladem
iconclick {String} (volitelně) musí obsahovat odkaz na funkci
autocomplete {String} (volitelně) musí obsahovat odkaz na funkci, je vyvolán na události focus
spaces {Boolean} (volitelně) umožňuje prostory jinak je odstraňuje (předběžné: true)
readonly {Boolean} Opční, default false
NEW innerlabel {Boolean} volitelné, umožňuje vnitřní označení (podmínkou: true)

Zajímavé je:

type:date používá složku calendar

Použijte ji s <ui-component name="textbox">Pokud je součástka ještě nezačleněna, jComponent Stáhnout ji na první použití z adresy DEF.fallback a) The Componentator CDN dle předvolby. autor: Peter Širka. zdroj: Componentator Výrobce je autorizován, MIT licence.

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>