j-Textbox

jComponent 20 · jcomponent@20 component Példa betöltve a jComponent 20-szal

konfiguráció:

type {String} (Opcionális) lehet a email, phone, password, date, number, search, lower, upper vagy az üres (default)
required {Boolean} (választékos) lehetővé teszi a „követelt” (default: false)
icon {String} (opcionális) ikon a címkékhez, például home, cog, stb.
icon2 {String} (opcionális) ikon a jobb dobozban például home, cog, stb.
label {String} (opcionális) címke (az alapértelmezett HTML tartalom)
autofocus {Boolean} (választékos) összpontosítja a bevitelt (default: false)
align {String} (választékos) left (meghatározott), right vagy center
autofill {Boolean} (választékos) lehetővé teszi a böngésző autofill funkcióját (például: false)
placeholder {String} (opcionális) hozzáad egy placeholder szöveget a bejegyzéshez
maxlength {Number} (opcionális) maximális hosszúságot határoz meg
minlength {Number} (opcionális) minimális hosszúságot határoz meg
validation {String} (Opcionális) egy feltétel a evaluation e.g. value.match(/[a-z]+/) !== null
format {String} (opcionális) kimeneti formázás például a dátumokhoz (előzetes: yyyy-MM-dd)
increment {Boolean} (választékos) lehetővé teszi a számok növelésére vonatkozó ellenőrzéseket (default: false)
keypress {Boolean} (opcionális) lehet kikapcsolni valós idejű kötelező értékek (default: true)
delay {Number} (választható) növelheti / csökkenti a késést valós idejű kötés (default: 300 ms)
disabled {Boolean} (opcionális) kiküszöböli ezt az összetevőt
error {String} (opcionális) hozzáad egy string szöveget a bejegyzés alatt
iconclick {String} (opcionális) tartalmaz egy linket a funkció
A autocomplete {String} (opcionális) funkcióhoz való linket tartalmaz, a focus eseményen indítható.
spaces {Boolean} (választékos) lehetővé teszi a helyek, különben eltávolítja őket (default: true)
readonly {Boolean} opcionális, alapértelmezett false
NEW innerlabel {Boolean} opcionális, lehetővé teszi a belső címkéket (default: true)

Érdekes az:

A type:date használja a calendar összetevőt

Használja a <ui-component name="textbox">Amennyiben a készülék még nem tölthető le, jComponent letöltés az első felhasználásra a címről DEF.fallback (Azt a Componentator A szerző: Peter Širka. forrás: a Componentator Az összetevők raktár, MIT licenc.

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>