j-Textbox

jComponent 20 · jcomponent@20 component Príklad načítaný s jComponent 20

Konfigurácia:

type {String} (voliteľné) môže byť email, phone, password, date, number, search, lower, upper alebo prázdny (predvolené)
required {Boolean} (voliteľné) povolí "povinné" (predvolené: false)
icon {String} (voliteľná) ikona pre štítok napr. home, cog, atď.
icon2 {String} (voliteľná) ikona v pravej krabici napr. home, cog, atď.
label {String} (voliteľná) značka (predvolená je obsah HTML)
autofocus {Boolean} (voliteľné) zaostrí vstup (predvolené: false)
align {String} (voliteľné) left (predvolené), right alebo center
autofill {Boolean} (voliteľne) umožňuje funkciu automatického prekladu prehliadača (predvolené: false)
placeholder {String} (voliteľné) pridá do vstupu text placeholder
maxlength {Number} (voliteľné) nastavuje maximálnu dĺžku znakov
minlength {Number} (voliteľne) nastaví minimálnu dĺžku nádrží
validation {String} (voliteľné) podmienka pre evaluation atď. value.match(/[a-z]+/) !== null
format {String} (voliteľné) formátovanie výstupu, napr. pre dátumy (predvolené: yyyy-MM-dd)
increment {Boolean} (voliteľné) umožňuje kontroly na zvýšenie počtu (predvolené: false)
keypress {Boolean} (voliteľné) môže deaktivovať reálne časové záväzné hodnoty (predvolené: true)
delay {Number} (voliteľné) môže zvýšiť/znížiť oneskorenie pre reálne zavedenie (predvolené: 300 ms)
disabled {Boolean} (voliteľné) deaktivuje tento komponent
error {String} (voliteľne) pridá text string pod vstupom
iconclick {String} (voliteľné) musí obsahovať odkaz na funkciu
autocomplete {String} (voliteľné) musí obsahovať odkaz na funkciu, je spustený na focus udalosti
spaces {Boolean} (voliteľné) umožňuje priestory inak ich odstráni (predvolené: true)
readonly {Boolean} voliteľné, predvolené false
NEW innerlabel {Boolean} voliteľné, umožňuje vnútornú značku (predvolené: true)

Zaujímavé:

type:date používa zložku calendar

Použite ho so <ui-component name="textbox">. Keď komponent ešte nie je načítaný, jComponent ho stiahne pri prvom použití z adresy v DEF.fallback (predvolene CDN Componentator). Autor: Peter Širka. Zdroj: úložisko komponentov Componentator, licencia MIT.

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>