j-Textbox

jComponent 20 · jcomponent@20 component Примерът е зареден с jComponent 20

Конфигуриране:

type {String} (опционално) може да бъде email, phone, password, date, number, search, lower, upper или празен (предварително)
required {Boolean} (опционално) позволява "необходимо" (предварително: false)
icon {String} (опционална) икона за етикета например home, cog, и т.н.
icon2 {String} (опционална) икона в дясната кутия, например home, cog, и т.н.
label {String} (опционално) етикет (предварително е HTML съдържание)
autofocus {Boolean} (опционално) фокусира входа (предварително: false)
align {String} (опционално) left (предварително), right или center
autofill {Boolean} (опционално) позволява функцията за автофил на браузъра (предварително: false)
placeholder {String} (опционално) добавя текст на placeholder към входа
maxlength {Number} (опционално) определя максимална дължина на камионите
minlength {Number} (опционално) определя минимална дължина на камионите
validation {String} (опционално) условие за evaluation т.н. value.match(/[a-z]+/) !== null
format {String} (опционално) форматиране на изхода, например за датите (предварително: yyyy-MM-dd)
increment {Boolean} (опционално) позволява контрола за увеличаване на числата (предварително: false)
keypress {Boolean} (опционално) може да деактивира стойностите в реално време (предварително: true)
delay {Number} (опционално) може да увеличи / намали закъснението за реално време (предварително: 300 ms)
disabled {Boolean} (опционално) деактивира този компонент
error {String} (опционално) добавя текст на string под входа
iconclick {String} (опционално) трябва да съдържа връзка към функцията
autocomplete {String} (опционално) трябва да съдържа връзка към функция, се излъчва на събитие focus
spaces {Boolean} (опционално) позволява пространства, в противен случай те се отстраняват (предварително: true)
readonly {Boolean} опционален, дефолт false
NEW innerlabel {Boolean} опционално, позволява вътрешна етикета (предварително: true)

Интересното е:

type:date използва компонента calendar

Използвайте го с <ui-component name="textbox">Когато компонентът все още не е зареден, jComponent Изтегляне на първия адрес в DEF.fallback (След това Componentator Източник: Питър Шерка Componentator Съставни съставки, лиценз на 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>