j-Textbox

jComponent 20 · jcomponent@20 component Exempel laddat med jComponent 20

Konfigurera:

type {String} (Optionellt) kan vara email, phone, password, date, number, search, lower, upper eller tomt (default)
required {Boolean} (alternativt) möjliggör ”nödvändigt” (default: false)
icon {String} (alternativ) ikon för etikett t.ex. home, cog, etc.
icon2 {String} (alternativ) ikon i högerlådan t.ex. home, cog, etc.
label {String} (alternativt) etikett (default är HTML-innehåll)
autofocus {Boolean} (alternativt) fokuserar på inmatningen (default: false)
align {String} (alternativ) left (default), right eller center
autofill {Boolean} (alternativt) aktiverar webbläsarens autofillfunktion (default: false)
placeholder {String} (alternativ) lägger till en placeholder text i inmatningen
maxlength {Number} (alternativt) ställer upp en maximal längd av lådor
minlength {Number} (alternativt) ställer in en minimilängd av batterier
validation {String} (alternativt) ett villkor för evaluation t.ex. value.match(/[a-z]+/) !== null
format {String} (alternativ) utgångsformat t.ex. för datum (default: yyyy-MM-dd)
increment {Boolean} (alternativ) möjliggör kontroller för att öka siffrorna (default: false)
keypress {Boolean} (alternativ) kan inaktivera bindande värden i realtid (default: true)
delay {Number} (alternativ) kan öka/minska förseningen för realtid bindning (default: 300 ms)
disabled {Boolean} (alternativt) inaktiverar denna komponent
error {String} (alternativt) lägger till en string text under inmatningen
iconclick {String} (alternativ) behöver innehålla en länk till en funktion
autocomplete {String} (alternativ) behöver innehålla en länk till en funktion, utlöses på händelsen focus
spaces {Boolean} (alternativt) tillåter utrymmen annars tar det bort dem (default: true)
readonly {Boolean} alternativ, standard false
NEW innerlabel {Boolean} valfritt, aktiverar inre etikett (default: true)

Intressanta är:

type:date använder komponenten calendar

Använd den med <ui-component name="textbox">När komponenten ännu inte är laddad, jComponent Ladda ner den första gången från adressen i DEF.fallback (en av Componentator Författare: Peter Širka. källa: The Componentator Komponenterna i lager, MIT licens.

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>