j-Textbox

jComponent 20 · jcomponent@20 component Exemplu încărcat cu jComponent 20

Configurarea:

type {String} (opțional) poate fi email, phone, password, date, number, search, lower, upper sau în mod implicit,
required {Boolean} (opțional) permite "required" (default: false)
Iconul icon {String} (opțional) pentru eticheta de exemplu home, cog, etc.
Iconul icon2 {String} (opțional) din caseta dreaptă, de exemplu, home, cog, etc.
label {String} (opțional) etichetă (default este conținutul HTML)
autofocus {Boolean} (opțional) se concentrează pe intrare (default: false)
align {String} (opțional) left (defaționat), right sau center
autofill {Boolean} (opțional) permite caracteristicile de autofilaj ale browserului (default: false)
placeholder {String} (opțional) adaugă un text placeholder în intrarea
maxlength {Number} (opțional) stabilește o lungime maximă a încărcăturii
minlength {Number} (opțional) stabilește o lungime minimă a încărcăturii
validation {String} (opțional) o condiție pentru evaluation și anume value.match(/[a-z]+/) !== null
Formatul de ieșire format {String} (opțional) pentru date (default: yyyy-MM-dd)
increment {Boolean} (opțional) permite controlul pentru creșterea numărului (default: false)
keypress {Boolean} (opțional) poate dezactiva valorile obligatorii in timp real (default: true)
delay {Number} (opțional) poate crește / reduce întârzierea pentru legarea în timp real (default: 300 ms)
disabled {Boolean} (opțional) dezactiva acest component
error {String} (opțional) adaugă un text string sub intrarea
iconclick {String} (opțional) trebuie să conțină un link la o funcție
autocomplete {String} (opțional) trebuie să conțină un link la o funcție, este declanșat pe evenimentul focus
spaces {Boolean} (opțional) permite spații altfel le îndepărtează (default: true)
readonly {Boolean} opțional, standard false
NEW innerlabel {Boolean} opțional, permite eticheta interioară (default: true)

Interesantă :

type:date utilizează componenta calendar

Utilizați-l cu <ui-component name="textbox">Când componenta nu este încă încărcată, jComponent Descărcați-l la prima utilizare de la adresa DEF.fallback (în cazul Componentator Autor: Peter Širka. sursă: Componentator Componente de stocare, MIT licență.

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>